关于事件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的动态表格插件
Mar 28 Javascript
jquery中ajax学习笔记4
Oct 16 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 Javascript
jQuery 实现双击编辑表格功能
Jun 19 jQuery
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
vue基于viewer实现的图片查看器功能
Apr 12 Javascript
Vue发布项目实例讲解
Jul 17 Javascript
世界上最短的数字判断js代码
Sep 09 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中的unset究竟会不会释放内存
2013/07/18 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python实现图片变亮或者变暗的方法
2015/06/01 Python
Python Web框架Tornado运行和部署
2020/10/19 Python
python多进程实现进程间通信实例
2017/11/24 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
荟萃全球保健品:维他购
2018/05/09 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
sealed修饰符是干什么的
2012/10/23 面试题
主要的Ajax框架都有什么
2013/11/14 面试题
护士长竞聘演讲稿
2014/04/30 职场文书
启动仪式策划方案
2014/06/14 职场文书
消防志愿者活动方案
2014/08/23 职场文书
三好学生个人总结
2015/02/15 职场文书
nginx实现动静分离的方法示例
2021/11/07 Servers
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL