mouseenter与mouseover为何这般纠缠不清?
发布在谦龙的小天地2017年6月5日view:359HTML5BrettBat性能优化正则表达式前端工程师面试闭包高阶函数DOMES6
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

前言

原文地址

项目地址

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

<!--more-->

mouseenter与mouseover的异同?

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

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

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

再看看官网对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.

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

评论
发表评论
4个月前

为毛啊,又被截断,靠

WRITTEN BY
_谦龙
快乐的前端小码农
TA的新浪微博
PUBLISHED IN
谦龙的小天地

希望可以在这里,写一些自己学习感悟、纪录和生活,一起分享,一起学习编程的快乐

我的收藏