关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别


Posted in Javascript onOctober 12, 2015

最近在做的在线考试和课程商城都遇到这样的问题:就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,解决这个现象的办法有许多,不过我觉得有一种是最简单的那就是把mouseover和mouseout换成对应的mouseenter和mouseleave。

当鼠标指针位于元素上方时,会发生 mouseover 事件。

该事件大多数时候会与 mouseout 事件一起使用。

注释:与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。

注释:与 mouseleave 事件不同,不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。请看下面例子的演示。

当鼠标指针穿过元素时,会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。

注意:mouseover ,mouseout当鼠标指针穿过被选元素子元素时,也会触发事件。这在绑定事件时,有时出现意想不到的Bug可能就是由 mouseover mouseout 事件引起的

mouseover与mouseenter

不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。

只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。

mouseout与mouseleave

不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。

只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。

Javascript 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
js实现兼容IE、Firefox的图片缩放代码
Dec 08 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
Vue中计算属性computed的示例解读
Jul 26 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
jquery实现可自动判断位置的弹出层效果代码
Oct 12 #Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 #Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 #Javascript
javascript函数式编程程序员的工具集
Oct 11 #Javascript
深入探讨javascript函数式编程
Oct 11 #Javascript
Javascript函数式编程语言
Oct 11 #Javascript
Javascript函数式编程简单介绍
Oct 11 #Javascript
You might like
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
Dojo 学习要点
2010/09/03 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
整理Javascript事件响应学习笔记
2015/12/02 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
化工专业推荐信范文
2013/11/28 职场文书
致百米运动员广播稿
2014/01/29 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
黄河绝恋观后感
2015/06/08 职场文书
python tkinter模块的简单使用
2021/04/07 Python
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL