关于事件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 相关文章推荐
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
JQuery验证工具类搜集整理
Jan 16 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 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求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
php命令行用法入门实例教程
2014/10/27 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
php中yii框架实例用法
2020/12/22 PHP
List the Codec Files on a Computer
2007/06/11 Javascript
jquery 问答知识整理
2010/02/11 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
jQuery使用$.ajax进行即时验证实例详解
2015/12/11 Javascript
javascript关于继承解析
2016/05/10 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
基于Python中的yield表达式介绍
2019/11/19 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
设计师求职信模板
2014/05/06 职场文书
社区助残日活动总结
2014/08/29 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
公司仓库管理制度
2015/08/04 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang
Python一些基本的图像操作和处理总结
2021/06/23 Python
python实现MD5进行文件去重的示例代码
2021/07/09 Python
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android