Have jQuery ignore children on event

Question

If i have the following markup:

<ul id="level1">
    <li>
        <a href="#">Test</a>
        <ul id="level2">
            <li>
                <a href="#">Test</a>
            </li>
        </ul>
    </li>
</ul>

Basically if i hover over level 1, i need it to do something. However when i hover over level2 it is triggering it because that is inside level1. Is there a way of making this only happen if i hover over level1.

An example of what i mean:

http://scottymeuk.in/Netr

The box on the left, is a parent of the box on the right. But i need the something to happen when hovering over the left box (parent), but not the right box (child).

Thank you.

Sorry if i have failed to explain my issue well enough.

http://stackoverflow.com/questions/2364629/jquery-stop-child-triggering-parent-event might help out — Pete, Mar 18 '13 at 14:28
Can't you just check if `event.target` == `level1` (pseudo code, not sure if it's actually called target or targetElement or whatever)? — qwerty, Mar 18 '13 at 14:28

score 3 · Accepted Answer · answered Mar 18 '13 at 14:28

3

One solution would be to call event.stopPropagation on the child:

$("#parent").on("someevent", function(){
  // do stuff
});

$("#child").on("someevent", function(e){
  e.stopPropagation(); // prevent the event from bubbling to the parent.
});

answered Mar 18 '13 at 14:28

James Montagne

77,516
14
110
130

score 2 · Answer 2 · answered Mar 18 '13 at 14:28

2

Please refer to the event object documentation...

http://api.jquery.com/category/event-object/

event.stopPropagation();

is what you need

$('#level2').hover)function(e) {
    e.stopPropagation(); // stops events from triggering in children
},function (e) {}

answered Mar 18 '13 at 14:28

zgr024

1,175
1
12
26

1

By the time it's reached `#level1` it's too late; this answer isn't correct. – Anthony Grist Mar 18 '13 at 14:30
sorry typo... meant child element – zgr024 Mar 18 '13 at 14:32

score 0 · Answer 3 · answered Mar 18 '13 at 14:55

0

$('level1').hover(function(){ if(!IsMouseOver($(this).find(level2)){ do what you want it to do }; });

I haven't tested it yet but you get the logic. is mouse over level1? yes. if it's over level1 and its not over level2 do what I want

answered Mar 18 '13 at 14:55

qualebs

1,291
2
17
34

Have jQuery ignore children on event

3 Answers3