关于事件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 11 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
jQuery基础知识小结
Dec 22 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
原生JS实现留言板功能
Feb 08 Javascript
node创建Vue项目步骤详解
Mar 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
第三节--定义一个类
2006/11/16 PHP
PHP无敌近乎加密方式!
2010/07/17 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
javascript运动详解
2015/07/06 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
Vue表单实例代码
2016/09/05 Javascript
jQuery事件详解
2017/02/23 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
大学在校生求职信范文
2013/11/21 职场文书
公司门卫岗位职责
2014/03/15 职场文书
大学生全国两会报告感想
2014/03/17 职场文书
优秀党支部申报材料
2014/12/24 职场文书
元旦主持词开场白
2015/05/29 职场文书
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技