关于事件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 相关文章推荐
JS Replace()的高级使用方法介绍
Jun 29 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 Javascript
js 实现验证码输入框示例详解
Sep 23 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中转义mysql语句的实现代码
2011/06/24 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
python 实现UTC时间加减的方法
2018/12/31 Python
python实现名片管理系统项目
2019/04/26 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
基于Python解密仿射密码
2019/10/21 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
2014三年级班主任工作总结
2014/12/05 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
党员转正申请报告
2015/05/15 职场文书
鉴史问廉观后感
2015/06/10 职场文书
2019消防宣传标语!
2019/07/10 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
不要在HTML中滥用div
2021/05/08 HTML / CSS
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python