javascript - JS mouseenter 触发两次

问题是关于被触发两次的事件 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'));
    });
})

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

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

最佳答案

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

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

Updated demo

关于javascript - JS mouseenter 触发两次，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26179191/