Избегайте событийных пожаров как для родителей, так и для детей

Question

У меня есть меню, построенное таким образом:

ul
    li
        a
    li
        a
    li
        a

Проблема, с которой я сталкиваюсь, заключается в следующем: когда пользователь нажимает li a, также запускается li-функция.li -функция должна срабатывать только в том случае, если кто-то щелкает только по li (отсутствует на теге a).

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

Есть ли способ написать это, чтобы сработала только одна из функций?При нажатии на li a должна запускаться функция, содержащая «debug1» (НЕ также debug2).При нажатии li должен запускаться debug2.

Я перепробовал каждую комбинацию children (), но не могу заставить это работать.

Есть ли здесь какой-нибудь дровосек?

Answer 1

Изменить с этого ..

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

на этот

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

предыдущий вызовет событие mousedown для всех дочерних элементов li, независимо от того, является ли он a или нет.