Предотвращение срабатывания события щелчка родительского контейнера при нажатии гиперссылки

На моей веб-странице есть список файлов.

Каждый файл находится в собственном контейнере div (div class = file). Внутри контейнера есть ссылка на файл и описание.

Я хотел разрешить пользователю щелкнуть в любом месте контейнера, чтобы загрузить файл. Я сделал это, добавив событие щелчка в контейнер и получив href дочерней ссылки.

Когда файл открывается в новом окне, если пользователь действительно щелкает ссылку, файл открывается дважды.

Поэтому мне нужно предотвратить срабатывание события щелчка родительского контейнера при нажатии гиперссылки. Лучше всего было бы добавить функцию щелчка к гиперссылке на 0 и установить event.stopPropagation? Предположительно, это остановит всплытие события в контейнер.


javascript dom-events
person Ben Foster    schedule 04.01.2010    source источник

Ответы (3)


arrow_upward
11
arrow_downward

Да, используйте stopPropagation. См .: Запретить выполнение родительского обработчика событий

person pix0r    schedule 04.01.2010
comment
Работает без jQuery. onClickHandler (событие) {event.stopPropagation (); } - person James Perih; 12.01.2017

arrow_upward
18
arrow_downward

В модели Microsoft вы должны установить для свойства cancelBubble значение true.

window.event.cancelBubble = true;

В модели W3C вы должны вызвать метод события stopPropagation ().

event.stopPropagation();

Вот кроссбраузерное решение, если вы не используете фреймворк:

function doSomething(e) {
    if (!e) e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}
person Luca Matteis    schedule 04.01.2010
comment
Это немного сбивает с толку, поскольку вы не показываете, что к чему привязано. - person daveagp; 26.07.2011

arrow_upward
3
arrow_downward

Спасибо за помощь.

Я использовал jQuery, но хорошо знать решение, не являющееся фреймворком.

Для ссылок добавлено следующее:

$(".flink").click(function(e) {
    e.stopPropagation();
});
person Ben Foster    schedule 04.01.2010
comment
Спасибо! У меня была именно эта проблема, которую было довольно неприятно отлаживать, и это решило ее. В моем случае у меня был обработчик кликов для .pub, а затем я добавил строку $ (. Pub a) .click (function (e) {e.stopPropagation ();}); - person daveagp; 26.07.2011
comment
не возвращает ли false из функции обработчика событий такой же эффект? - person Johnus; 01.10.2011
comment
@Johnus - нет - см. fuelyourcoding.com/jquery-events -stop-misusing-return-false - person Ben Foster; 13.10.2011