Может кто-нибудь объяснить, как работает этот stopPropagation?

Question

Я пытался настроить этот тип, когда вы щелкаете за пределами элемента и закрываете его, используя некоторый код, который я нашел в Stackoverflow:

$(document).click(function() {
 $('.list-to-hide').hide();
});

$('.show-list-button').click(function(event) {
 event.stopPropagation();
});

Может ли кто-нибудь объяснить более позднюю часть с помощью stopPropagation? Я не понимаю, зачем это нужно.

Спасибо! Matt

Answer 1

Представьте себе это:

<div>
    DIV
    <span>
        Span
    </span>
<div>

и

$('div').click(function() { alert('div clicked'); });
$('span').click(function() { alert('span clicked'); });

Проверьте, что происходит, когда вы нажимаете каждый из них

Когда вы щелкаете по промежутку, он также вызывает div, потому что вы также щелкаете по div.

Теперь, если мы хотим предупредить промежуток только , нам нужно остановить срабатывание клика по div, когда мы щелкаем по промежутку, поэтому мы делаем это:

$('div').click(function() { alert('div clicked'); });
$('span').click(function(e) { alert('span clicked'); e.stopPropagation(); });

Посмотрите, что происходит сейчас

Answer 2

В вашем примере кода отсутствует важная часть:

$(document).click(function() {
    $('.list-to-hide').hide();
});

$('.show-list-button').click(function(event) {
    event.stopPropagation();
    $('.list-to-hide').show();
});

Без event.stopPropagation() он отобразит список, а затем скроет его, потому что .show-list-button это внутри $(document), поэтому оба обработчика клика сработают.event.stopPropagation() в основном говорит, что применяет это событие клика только к ЭТОМУ РЕБЕНКУ и ничего не сообщает родительским контейнерам, потому что я не хочу, чтобы они реагировали .

Подумайте об этом так - вы арендуете такси за 100 долларов.Водитель дает своей компании 80 долларов.event.stopPropagation() все равно что сказать ему оставить все 100 долларов, потому что компании не нужно ничего знать о поездке.

Answer 3

event.stopPropagation(); предотвращает всплеск события в DOM. Без этой строки, щелкнув по .show-list-button, сработает также обработчик кликов для документа. При этом щелчок документа не сработает.

Answer 4

Вы читали это?

http://api.jquery.com/event.stopPropagation/

Он предотвращает всплытие события в дереве DOM, предотвращая уведомление любых родительских обработчиков о событии.

Пример

Убить пузырение при событии щелчка.

$("p").click(function(event){
  event.stopPropagation();
  // do something
});