mouseenter与mouseover为何这般纠缠不清?

原创 我的小苹果 随笔 Zepto源码分析 378阅读 2018-02-24 20:51:09 举报

前言

原文地址

项目地址

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

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.

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

评论 ( 12 )
最新评论
大神M 10F 2018-02-25 21:24:58 12F

表情符号的问题,我们明天就让技术排查解决

我的小苹果 9F 2018-02-25 20:27:17 11F

要不私信你

PF2 6F 2018-02-25 15:05:00 10F

我在/比如这个/后面打了一个表情符号,发表后就看不到了

大神M 8F 2018-02-25 14:59:01 9F

好的,我们立刻改,你这个文档源代码在哪里?我本地试试看,好分析问题。

我的小苹果 5F 2018-02-25 14:56:20 8F

看起来是从表情符号开始 截断的

我的小苹果 5F 2018-02-25 14:54:08 7F
PF2 2018-02-25 14:41:17 6F

输入法直接输入的表情符号,比如这个

大神M 4F 2018-02-25 12:57:01 5F

是什么表情符号??

大神M 1F 2018-02-25 12:56:37 4F

是什么表情符号?我们改

PF2 1F 2018-02-25 10:11:01 3F

不能识别表情符号,改版之前也是这样

hugeannex 2018-02-24 22:13:00 2F

一直没觉得纠缠不清啊?

我的小苹果 2018-02-24 20:56:39 1F

为什么我贴了完整一篇文章,最后却被截断了