关于事件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 相关文章推荐
jQuery 研究心得 取得属性的值
Nov 30 Javascript
有关DOM元素与事件的3个谜题
Nov 11 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
Jan 25 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
React 组件中的 bind(this)示例代码
Sep 16 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
vue监听键盘事件的相关总结
Jan 29 Vue.js
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
资料注册后发信小技巧
2006/10/09 PHP
php高级编程-函数-郑阿奇
2011/07/04 PHP
解析php中call_user_func_array的作用
2013/06/07 PHP
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
js每次Title显示不同的名言
2008/09/25 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
python和C语言混合编程实例
2014/06/04 Python
Python 字典dict使用介绍
2014/11/30 Python
python跳出双层for循环的解决方法
2019/06/24 Python
Python random模块的使用示例
2020/10/10 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
饲料采购员岗位职责
2013/12/19 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
旷课检讨书500字
2014/10/14 职场文书
关于长城的导游词
2015/01/30 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
七年级作文之下雨天
2019/12/23 职场文书
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers
Redis keys命令的具体使用
2022/06/05 Redis