关于事件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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
Angular 4.x 动态创建表单实例
Apr 25 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
基于element-ui封装表单金额输入框的方法示例
Jan 06 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 8小时时间差的解决方法小结
2009/12/22 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
php从字符串创建函数的方法
2015/03/16 PHP
利用JS判断用户是否上网(连接网络)
2013/12/23 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
js获取页面description的方法
2015/05/21 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
基于python时间处理方法(详解)
2017/08/14 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
中国宠物用品商城:E宠商城
2016/08/27 全球购物
英文版区域经理求职信
2013/10/23 职场文书
项目经理岗位职责
2013/11/11 职场文书
开学典礼决心书
2014/03/11 职场文书
歌唱比赛主持词
2014/03/18 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
微信搭讪开场白
2015/05/28 职场文书
小学运动会加油稿
2015/07/22 职场文书
老乡会致辞
2015/07/28 职场文书
中秋节祝酒词
2015/08/12 职场文书