关于事件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 相关文章推荐
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
js验证框架实现代码分享
May 18 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
vue组件生命周期详解
Nov 07 Javascript
3种vue组件的书写形式
Nov 29 Javascript
Vuex模块化应用实践示例
Feb 03 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 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 SQL Injection with MySQL
2011/02/27 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
python服务器端收发请求的实现代码
2014/09/29 Python
Python中list初始化方法示例
2016/09/18 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
用python实现百度翻译的示例代码
2018/03/09 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
Python输出指定字符串的方法
2020/02/06 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
英国二手物品交易网站:Preloved
2017/10/06 全球购物
.net面试题
2015/12/22 面试题
shell程序中如何注释
2012/01/28 面试题
linux系统都有哪些运行级别
2016/03/26 面试题
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书