关于事件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 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
mailto的使用技巧分享
Dec 21 Javascript
使用JS读秒使用示例
Sep 21 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
js querySelector() 使用方法
Dec 21 Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
用几道面试题来看JavaScript执行机制
Apr 30 Javascript
JavaScript实现简单的音乐播放器
Aug 14 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获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
Python类的基础入门知识
2008/11/24 Python
在Python中处理XML的教程
2015/04/29 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
Python 如何实现访问者模式
2020/07/28 Python
Python jieba库分词模式实例用法
2021/01/13 Python
python用700行代码实现http客户端
2021/01/14 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
DOM和JQuery对象有什么区别
2016/11/11 面试题
员工自我鉴定范文
2013/10/06 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
人事任命书怎么写
2014/06/05 职场文书
银行纠风工作实施方案
2014/06/08 职场文书
西安兵马俑导游词
2015/02/02 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书