美文网首页
mouseover和mouseenter的区别(转)

mouseover和mouseenter的区别(转)

作者: 前端老邹_伯通 | 来源:发表于2021-06-08 09:01 被阅读0次

    参考链接:https://juejin.cn/post/6844903480470028302

    • mouseover:当鼠标移入元素或其子元素都会触发事件,所以有一个重复触发,冒泡过程。对应的移除事件是mouseout

    • mouseenter:当鼠标移除元素本身(不包含元素的子元素)会触发事件,也就是不会冒泡,对应的移除事件是mouseleave

    mouseover和mouseenter的异同体现在两个方面:

    1. 是否支持冒泡

    2.事件的触发时机

    有了 mouseover,为什么要有 mouseenter事件?

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

    • 可见mouseover事件因其具有冒泡的性质,在子元素内移动的时候,频繁被触发,如果我们不希望如此,可以使用mouseenter事件代替之

    image
    • mouseenter事件的情况:

    当鼠标从元素的边界之外移入元素的边界之内时,事件被触发。而鼠标本身在元素边界内时,要触发该事件,必须先将鼠标移出元素边界外,再次移入才能触发。

    也就是说:mouseover支持事件冒泡,而mouseenter不支持事件冒泡

    相关文章

      网友评论

          本文标题:mouseover和mouseenter的区别(转)

          本文链接:https://www.haomeiwen.com/subject/ycldrltx.html