Я пытался настроить этот тип «когда вы щелкаете за пределами элемента, закрываете его», используя некоторый код, который я нашел в Stackoverflow:
$(document).click(function() {
$('.list-to-hide').hide();
});
$('.show-list-button').click(function(event) {
event.stopPropagation();
});
Может ли кто-нибудь объяснить последнюю часть с помощью stopPropagation? Я не понимаю, зачем это нужно.
Спасибо! Мэтт
Представьте себе это:
<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(); });
В вашем примере кода отсутствует важная часть:
$(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 долларов, потому что компании не нужно ничего знать о поездке.
event.stopPropagation(); предотвращает всплытие события в DOM. Без этой строки при нажатии на .show-list-button обработчик щелчка для документа также сработает. С ним щелчок по документу не сработает.
Вы читали это?
http://api.jquery.com/event.stopPropagation/
Это предотвращает всплытие события вверх по дереву DOM, предотвращая уведомление родительских обработчиков о событии.
Пример
Убейте пузыри в событии клика.
$("p").click(function(event){
event.stopPropagation();
// do something
});
