由onmouseover、onmouseenter浅谈事件冒泡机制

原创于 2021-06-21 15:01:43 发布

· 281 阅读

1 ·

版权

文章标签：

#javascript

工作笔记同时被 2 个专栏收录

25 篇文章

订阅专栏

javascript

3 篇文章

订阅专栏

本文探讨了在前端开发中，如何处理导航栏的鼠标移入移出事件。通过比较onmouseenter和onmouseleave以及onmouseover和onmouseout的区别，重点解释了事件冒泡的概念，并给出了实例代码，展示了onmouseleave如何避免在鼠标移出子元素时触发隐藏子导航栏的问题。总结了这两组事件的不同，强调了正确选择和使用事件监听器对于用户体验的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

如上图所示，最近的项目在导航栏处要实现上面的效果，鼠标移开大红框时子导航栏要消失，最开始鼠标移开事件我用的是onmouseover来绑定hideTrade方法，但出现了一个问题，鼠标移出小红框时也会触发hideTrade，改为onmouseleave之后就没有这个问题了，查了一下原来这两个方法最大的不同在于onmouseleave方法会触发事件冒泡。

 <transition name="fade">
<div class="sonBar" v-show="isTrade" @mouseleave="hideTrade()">
    <span @click="toTrade(0)" :class="{ active: curId === 0 }" class="pointer">
    展览
    </span>
    <span @click="toTrade(1)" :class="{ active: curId === 1 }" class="pointer">
    图片预览
    </span>
    ...
</div>
</transition>