关于事件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 相关文章推荐
mapper--图片热点区域高亮组件官方站点
Dec 22 Javascript
JavaScript DOM基础
Apr 13 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
javascript运动详解
Jul 06 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 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
php minixml详解
2008/07/19 PHP
php自定义分页类完整实例
2015/12/25 PHP
Laravel 队列使用的实现
2019/01/08 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
Python3访问并下载网页内容的方法
2015/07/28 Python
python PIL模块与随机生成中文验证码
2016/02/27 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
大学生收银员求职信分享
2014/01/02 职场文书
大学生村官心得体会范文
2014/01/04 职场文书
安全生产实施方案
2014/02/23 职场文书
家长会演讲稿
2014/04/26 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python