CODEWITHSUNDEEP
jqueryevents
OptimusCrime
OptimusCrime

Reputation: 14863

Avoid event fireing for both parents and children

I have a menu built this way:

ul
    li
        a
    li
        a
    li
        a

The problem I am having is this: When a user clicks li a the li-function fires as well. The li-function should only fire if someone clicks just the li (misses on the a-tag).

$('#stromSkjemaTabs li').children().mousedown(function () {
    $('#console').append('debug1 <br />');
});
$('#stromSkjemaTabs li').mousedown.(function () {
    $('#console').append('debug2 <br />');
});

Is there any way of writing this so only one of the functions fires? When clicking the li a the function containing "debug1" should fire (NOT debug2 too). When clicking li the debug2 should fire.

I've tried every combination of children() but I can't get this to work.

Any cleaver heads out there?

Upvotes: 0

Views: 486

Answers (1)

Vivek
Vivek

Reputation: 11028

Change from this.. 

$('#stromSkjemaTabs li').children().mousedown(function () {
    $('#console').append('debug1 <br />');
});

to this

$('#stromSkjemaTabs > li > a').mousedown(function (e) {
    e.stopPropagation();
    $('#console').append('debug1 <br />');
});

previous one will fire mousedown event on all the children of li, whether it is a or not.

Upvotes: 1

Related Questions