Question

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?

Answer 1

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.