关于事件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 相关文章推荐
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Nov 14 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
Nov 20 Javascript
JQuery教学之性能优化
May 14 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 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循环获取GET和POST值的代码
2008/04/09 PHP
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
asp.net和php的区别点总结
2019/10/10 PHP
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
微信小程序canvas实现签名功能
2021/01/19 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
python实现移动木板小游戏
2020/10/09 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
教师师德师风整改措施
2014/10/24 职场文书
2014年团工作总结
2014/11/27 职场文书
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL