JS mouseenter 触发两次答案

【问题标题】：JS mouseenter triggered twiceJS mouseenter 触发两次
【发布时间】：2014-10-03 12:45:55
【问题描述】：

问题是关于触发两次的事件 mouseenter。代码在这里：http://jsfiddle.net/xyrhacom/

HTML：

<div id="elt1" class="elt" val="text1">
    text1
    <div id="elt2" class="elt" val="text2">
        text2
    <div>
</div>

JS：

$(document).ready(function() {
    $(".elt").mouseenter(function() {
        console.log($(this).attr('val'));
    });
})

我知道问题是事件与类属性相关联，因此每个类都会触发它，但我需要找到一种方法来考虑只为孩子触发的事件。

在示例中，当鼠标悬停在 text2 上时，它会在控制台中显示“text2 text1”，但我想找到一种只显示“text2”的方法（保持相同的 HTML 代码）

【问题讨论】：

标签： javascript jquery events mouseenter

【解决方案1】：

使用stopPropagation()；防止事件冒泡 DOM 树，

$(document).ready(function() {
    $(".elt").mouseenter(function(e) {
       e.stopPropagation();
        console.log($(this).attr('val'));
    });
})

Updated demo

【讨论】：

我不知道在回答这个问题时情况是否有所不同，但根据 2021 年的 MDN 文档，“mouseenter”根本不会冒泡。

【解决方案2】：

#elt1 和 #elt2 都有你的选择器类 (.elt) 使用 event.stopPropagation() 阻止事件在 DOM 树中冒泡

$(document).ready(function() {
    $(".elt").mouseenter(function(event) {
        event.stopPropagation();
        console.log($(this).attr('val'));
    });
})

【讨论】：

【解决方案3】：

如果只想让第一个孩子触发事件，可以使用如下选择器：

$(".elt > .elt")

【讨论】：

【解决方案4】：

这里的问题是elt2 在elt1 内部，而mouseenter 事件在DOM 链上冒泡。您需要使用event.stopPropagation() 来阻止冒泡，以防止您的函数多次触发：

$(document).ready(function() {
    $(".elt").mouseenter(function(e) {
        e.stopPropagation();

        console.log($(this).attr('val'));
    });
})

我在这里做了一个小提琴：http://jsfiddle.net/autoboxer/9e243sgL/

干杯，自动装箱

【讨论】：