Question

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

我理解问题是事件链接到class属性所以它是为每个类触发的，但是我需要找到一种方法来考虑为孩子触发的事件。

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

Answer 1

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

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

Updated demo

Answer 2

＃elt1和＃elt2都有你的选择器类（.elt）使用event.stopPropagation（）来阻止事件在DOM树中冒泡

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

Answer 3

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

$(".elt > .elt")

Answer 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/

干杯， autoboxer

JS mouseenter触发了两次

4 个答案:

Updated demo