关于事件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 相关文章推荐
JS鼠标滑过图片时切换图片实现思路
Sep 12 Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
node中socket.io的事件使用详解
Dec 15 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
Oct 07 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 Javascript
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
sae使用smarty模板的方法
2013/12/17 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
J2EE相关知识面试题
2013/08/26 面试题
地球一小时倡议书
2014/04/15 职场文书
实习协议书范本
2014/09/25 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
英文慰问信范文
2015/03/24 职场文书
小学英语听课心得体会
2016/01/14 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
详解python字符串驻留技术
2021/05/21 Python