mouseout与mouseleave区别

最新推荐文章于 2024-03-21 15:06:28 发布

原创最新推荐文章于 2024-03-21 15:06:28 发布 · 427 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#鼠标离开 #onmouserleave #onmouseout

js 专栏收录该内容

122 篇文章

订阅专栏

本文详细解析了mouseenter与mouseleave事件的特性，强调了这两个事件不冒泡的特点，并对比了mouseout事件，阐述了在实际应用中如何避免使用mouseout事件导致的闪烁问题。

简单总结如下：

（1）.如果在A元素注册mouseleave事件，那么必须鼠标指针完全移出A元素事件才会触发。

（2）.如果在A元素注册mouseout事件（会冒泡），不但鼠标指针完全移出A元素会触发事件，鼠标指针从A元素移入它的子元素和鼠标指针从子元素移入A元素也会触发事件。

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mouseleave_event

mouseenter类似 mouseover，它们两者之间的差别是 mouseenter 不会冒泡（bubble），也就是说当指针从它的子层物理空间移到它的物理空间上时不会触发

mouseenter 和 mouseleave 是不会冒泡的，这两是一对

所以以后再用的过程当中呢，最好是用mouseleave事件和mouseenter，要不会用mouseout事件会一直闪（原因2）

<body>
        <div>
            <span>
                aaa
            </span>
            <span>
                bbb
            </span>
            <span>
                ccc
            </span>
        </div>
        <p>213213231321</p>
</body>
<script>
    let ele=document.querySelector('div');
    ele.onmouseleave=function(){
        console.log('onmouseleave');
        
    }

</script>