JQuery stopPropagation bubble down

У меня есть div со ссылкой внутри него:

<div id="myDiv">
    <a href="#" onclick="location.href='http://www.lol.com'; return false;">Lol</a>
</div>

Щелчок по <div /> должен идти куда-то, но нажатие на дочерний элемент <a /> следует перейти на www.lol.com. Я видел из предыдущих вопросов и сайт jQuery, который .stopPropagation предотвращает пузырение вверх, но как я могу предотвратить пузырь вниз (не так ли здесь здесь?).

Ответы

Ответ 1

События только пузырятся. Поэтому обработчик события click для элемента a запускается перед обработчиком события click для div. Если вы хотите описать поведение, вам нужно добавить обработчик события клика к элементу, который останавливает распространение в div.

$("#myDiv a").click( function(event) {
    event.stopPropagation();
} );

и сохраните любой обработчик событий, который у вас есть на div. Это должно позволить событию выполнить его действие по умолчанию и предотвратить запуск обработчика в div.

Если вы хотите предотвратить клики по ссылкам, вы можете изменить обработчик событий для элемента div

$("#myDiv").click( function( event ) {
    if( !$( event.target ).is( "a" ) )
    {
        // existing event handler
    }
} );

Ответ 2

Проблема заключалась в том, что нажатие на якорь по-прежнему вызывало щелчок в <div>. Это называется "событие пузыря".

На самом деле существует несколько решений:

Проверка в обработчике событий DIV click, был ли фактический целевой элемент привязкой    → jsFiddle

$('#myDiv').click(function (evt) {
    if (evt.target.tagName != "A") {
        alert('123');
    }

    // Also possible if conditions:
    // - evt.target.id != "ancherComplaint"
    // - !$(evt.target).is("#ancherComplaint")
});

$("#ancherComplaint").click(function () {
    alert($(this).attr("id"));
});

Остановка распространения события из прослушивателя кликов привязки → jsFiddle

$("#ancherComplaint").click(function (evt) {
    evt.stopPropagation();
    alert($(this).attr("id"));
});

Как вы могли заметить, я удалил следующую часть селектора из своих примеров:

:not(#ancherComplaint)

Это было необязательно, потому что нет элемента с заголовком class.expandable-panel, который также имеет #ancherComplaint как его идентификатор.

Я предполагаю, что вы хотите подавить событие для привязки. Это не может работать таким образом, потому что оба селектора (ваш и мой) выбирают тот же самый DIV. Селектор не влияет на слушателя при его вызове; он устанавливает только список элементов, к которым должны быть зарегистрированы слушатели. Поскольку этот список в обеих версиях одинаковый, разницы нет.