javascript中mouseenter与mouseover的异同


Posted in Javascript onJune 06, 2017

不知道大家在面试或者工作过程中有没有被 mouseovermouseenter (对应的是 mouseoutmouseleave )事件所困扰。自己之前在面试的时候就有被问到诸如mouseover和mouseenter事件的异同之类的问题?当时没有答出来,一直也对这两个事件有点模糊不清,趁着最近正在读 zepto源码 ,准备写一篇这方面的文章,如果有错误,请大家指正。

javascript中mouseenter与mouseover的异同 mouseenter与mouseover的异同?

要说清楚mouseenter与mouseover有什么不同,也许可以从两方面去讲。

是否支持冒泡 事件的触发时机

先来看一张图,对这两个事件有一个简单直观的感受。

javascript中mouseenter与mouseover的异同 再看看官网对mouseenter的解释

mouseenter | onmouseenter event

The event fires only if the mouse pointer is outside the boundaries of the object and the user moves the mouse pointer inside the boundaries of the object. If the mouse pointer is currently inside the boundaries of the object, for the event to fire, the user must move the mouse pointer outside the boundaries of the object and then back inside the boundaries of the object.

大概意思是说:当鼠标从元素的边界之外移入元素的边界之内时,事件被触发。而当鼠标本身在元素边界内时,要触发该事件,必须先将鼠标移出元素边界外,再次移入才能触发。(英语比较渣:no_mouth:,凑合看哈)

Unlike the onmouseover event, the onmouseenter event does not bubble.

大概意思是:和mouseover不同的是,mouseenter不支持事件冒泡 (英语比较渣:no_mouth:,凑合看哈)

由于mouseenter不支持事件冒泡,导致在一个元素的子元素上进入或离开的时候会触发其mouseover和mouseout事件,但是却不会触发mouseenter和mouseleave事件

我们用一张动图来看看他们的区别(或者点击该链接体验)。

javascript中mouseenter与mouseover的异同

我们给左右两边的ul分别添加了 mouseovermouseenter 事件,当鼠标进入左右两边的ul时, mouseovermouseenter 事件都触发了,但是当移入各自的子元素li的时候,触发了左边ul上的mouseover事件,然而右边ul的mouseenter事件没有被触发。

造成以上现象本质上是 mouseenter 事件不支持冒泡所致。

如何模拟mouseenter事件。

可见mouseover事件因其具有冒泡的性质,在子元素内移动的时候,频繁被触发,如果我们不希望如此,可以使用mouseenter事件代替之,但是早期只有ie浏览器支持该事件,虽然现在大多数高级浏览器都支持了mouseenter事件,但是难免会有些兼容问题,所以如果可以自己手动模拟,那就太好了。

关键因素: relatedTarget 要想手动模拟mouseenter事件,需要对mouseover事件触发时的事件对象event属性relatedTarget了解。

relatedTarget事件属性返回与事件的目标节点相关的节点。 对于mouseover事件来说,该属性是鼠标指针移到目标节点上时所离开的那个节点。 对于mouseout事件来说,该属性是离开目标时,鼠标指针进入的节点。 对于其他类型的事件来说,这个属性没有用。

重新回顾一下文章最初的那张图,根据上面的解释,对于ul上添加的mouseover事件来说,relatedTarget只可能是

ul的父元素wrap(移入ul时,此时也是触发mouseenter事件的时候, 其实不一定,后面会说明 ), 或者ul元素本身(在其子元素上移出时), 又或者是子元素本身(直接从子元素A移动到子元素B)。

javascript中mouseenter与mouseover的异同
relatedTarget

根据上面的描述,我们可以对relatedTarget的值进行判断:如果值不是目标元素,也不是目标元素的子元素,就说明鼠标已移入目标元素而不是在元素内部移动。

条件1: 不是目标元素 很好判断 e.relatedTarget !== target(目标元素)

条件2:不是目标元素的子元素,这个应该怎么判断呢?

ele.contains

这里需要介绍一个新的api node.contains(otherNode) , 表示传入的节点是否为该节点的后代节点, 如果 otherNode 是 node 的后代节点或是 node 节点本身.则返回true , 否则返回 false

用法案例

<ul class="list">
 <li class="item">1</li>
 <li>2</li>
</ul>
<div class="test"></div>
let $list = document.querySelector('.list')
let $item = document.querySelector('.item')
let $test = document.querySelector('.test')

$list.contains($item) // true
$list.contains($test) // false
$list.contains($list) // true

那么利用contains这个api我们便可以很方便的验证条件2,接下来我们封装一个 contains(parent, node) 函数,专门用来判断 node 是不是 parent 的子节点

let contains = function (parent, node) {
 return parent !== node && parent.contains(node)
}

用我们封装过后的 contains 函数再去试试上面的例子

contains($list, $item) // true
contains($list, $test) // false
contains($list, $list) // false (主要区别在这里)

这个方法很方便地帮助我们解决了模拟mouseenter事件中的条件2,但是悲催的 ode.contains(otherNode) ,具有浏览器兼容性,在一些低级浏览器中是不支持的,为了做到兼容我们再来改写一下contains方法

let contains = docEle.contains ? function (parent, node) {
 return parent !== node && parent.contains(node)
} : function (parent, node) {
 let result = parent !== node

 if (!result) { // 排除parent与node传入相同的节点
 return result
 }

 if (result) {
 while (node && (node = node.parentNode)) {
  if (parent === node) {
  return true
  }
 }
 }

 return false
}

说了这么多,我们来看看用 mouseover 事件模拟 mouseenter 的最终代码

// callback表示如果执行mouseenter事件时传入的回调函数

let emulateEnterOrLeave = function (callback) {
 return function (e) {
 let relatedTarget = e.relatedTarget
 if (relatedTarget !== this && !contains(this, relatedTarget)) {
  callback.apply(this, arguments)
 }
 }
}

详细代码点击

代码示例点击

好了,我们已经通过mouseove事件完整的模拟了mouseenter事件,但是反过头来看看

对于ul上添加的mouseover事件来说,relatedTarget只可能是

ul的父元素wrap(移入ul时,此时也是触发mouseenter事件的时候, 其实不一定,后面会说明 ), 或者ul元素本身(在其子元素上移出时), 又或者是子元素本身(直接从子元素A移动到子元素B)。

我们通过排查2和3,最后只留下1,也就是mouseenter与mouseover事件一起触发的时机。既然这样我们为什么不像这样判断呢?

target.addEventListener('mouseover', function (e) {
 if (e.relatedTarget === this.parentNode) {
 // 执行mouseenter的回调要做的事情 
 }
}, false)

这样不是更加简单吗?,何必要折腾通过排查2和3来做?

原因是,target的父元素有一定的占位空间的时后,我们这样写是没有太大问题的,但是反之,这个时候 e.relatedTarget 就可能是target元素的父元素,又祖先元素中的某一个。我们无法准确判断e.relatedTarget到底是哪个元素。所以通过排除2和3应该是个更好的选择。

用mouseout模拟mouseleave事件

当mouseout被激活时,relatedTarget表示鼠标离开目标元素时,进入了哪个元素,我们同样可以对relatedTarget的值进行判断:如果值不是目标元素,也不是目标元素的子元素,就说明鼠标已移出目标元素

我们同样可以用上面封装的函数完成

// callback表示如果执行mouseenter事件时传入的回调函数

let emulateEnterOrLeave = function (callback) {
 return function (e) {
 let relatedTarget = e.relatedTarget
 if (relatedTarget !== this && !contains(this, relatedTarget)) {
  callback.apply(this, arguments)
 }
 }
}

结尾

文中也许有些观点不够严谨,欢迎大家拍砖。

Javascript 相关文章推荐
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
原生js实现验证码功能
Mar 16 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
jquery仿京东商品放大浏览页面
Jun 06 #jQuery
Node.js连接mongodb实例代码
Jun 06 #Javascript
jquery实现图片放大点击切换
Jun 06 #jQuery
AngularJS 验证码60秒倒计时功能的实现
Jun 05 #Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 #Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 #Javascript
Vue2.0实现购物车功能
Jun 05 #Javascript
You might like
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
Javascript 继承机制的实现
2009/08/12 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
2011/11/14 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
python通过smpt发送邮件的方法
2015/04/30 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
Flask数据库迁移简单介绍
2017/10/24 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
详解python变量与数据类型
2020/08/25 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
Python实现石头剪刀布游戏
2021/01/20 Python
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
入党自我评价优缺点
2014/01/25 职场文书
个人课题方案
2014/05/08 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
数学教师求职信范文
2015/03/20 职场文书