JS mouseenter triggered twice

Question

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)

Answer 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

Answer 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'));
    });
})

Answer 3

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

Answer 4

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

$(".elt > .elt")