JS mouseenter triggered twice

问题:

The problem is about event mouseenter which is triggered twice. The code is here : 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'));
    });
})

I understand the problem is the event is linked to the class attribute so it is triggered for each class, but I need to find a way to consider just the event triggered for the child.

In the example, when mouseover text2, it displays in the console 'text2 text1' but I want to find a way to only display 'text2' (keeping the same HTML code)

回答1:

use stopPropagation(); Prevents the event from bubbling up the DOM tree,

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

Updated demo

回答2:

Both #elt1 and #elt2 have your selector class (.elt ) use event.stopPropagation() to stop event from bubbling up in the DOM tree

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

回答3:

If you only want to let the first child trigger the event, you can use a selector like:

$(".elt > .elt")

回答4:

The issue here is that elt2 is inside elt1, and the mouseenter event is bubbling up the DOM chain. You need to stop the bubbling by using event.stopPropagation() to prevent your function from firing multiple times:

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

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

I've made a fiddle here: http://jsfiddle.net/autoboxer/9e243sgL/

Cheers, autoboxer