CODEWITHSUNDEEP
javascriptjqueryeventsmouseenter
user3656665
user3656665

Reputation: 117

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)

Upvotes: 4

Views: 4673

Answers (4)

autoboxer
autoboxer

Reputation: 1397

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

Upvotes: 1

mufasa
mufasa

Reputation: 1344

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

$(".elt > .elt")

Upvotes: 1

Snellface
Snellface

Reputation: 608

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

Upvotes: 1

Balachandran
Balachandran

Reputation: 9637

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

Upvotes: 4

Related Questions