mouseenter和mouseover

【宝宝懵逼系列】

唉,这两个坑爹的东西,特别想说只可意会不可言传,我严重怀疑自己能不能解释明白。。。

首先,宝宝试了两个浏览器:最爱的Chrome和FireFox,结果是:

enter是捕获阶段执行,over是冒泡阶段执行

也就是说对于下面这种结构,

<div id="div1">
    <div id="div2">
        <div id="div3"></div>
    </div>
</div>


使用mouseenter,鼠标只移入div3(但看上去没移入div2和div1)的时候,控制台输出

使用mouseover,鼠标只移入div3(但看上去没移入div2和div1)的时候,控制台输出

2. 从div1 => div2 => div3 => div2 => div1(此过程无理数始终不离开div1)输出内容不同:

mouseenter的过程:


过程是酱紫的:
移入蓝色的时候输出“div1 div2 div3”,从蓝色移入橙色,不输出,从橙色移入绿色,不输出,
返回来,从绿色移入橙色,只输出“div2”,从橙色移入蓝色,只输出“div3”
mouseover的过程:

过程是酱紫的:
移入蓝色的时候输出“div3 div2 div1”,从蓝色移入橙色,输出“div2 div1”,从橙色移入绿色,输出“div1”,
返回来,从绿色移入橙色,输出“div2 div1”,从橙色移入蓝色,输出“div3 div2 div1”。

总结就是两句话:

  1. 不论鼠标指针穿过备选元素或其子元素,都会触发“mouseover”,对应mouseout;
  2. 只有鼠标指针划过备选元素时,才会触发mouseenter事件,对应mouseleave。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • jQuery基础 什么是JQ?一个优秀的JS库,大型开发必备JQ的好处?一简化JS的复杂操作二不再需要关心兼容性三...
    幺七阅读 956评论 0 2
  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 1,640评论 2 10
  • 焦点事件焦点事件会在页面元素获得或失去焦点时触发。确定浏览器是否支持该类事件! var isSu...
    Miss____Du阅读 6,583评论 1 10
  • 本文以div元素布局为例。教程开始:首先要知道,div是块级元素(div与span),在页面中独占一行,自上而下排...
    TW妖妖阅读 397评论 0 1
  • 我们常说一家优秀的企业之所以优秀,是因为他集中了大量优秀的人才,而优秀的人才不会流失,反而在优秀的企业文化中走向...
    不谷鸟阅读 1,248评论 0 0