Я хочу понять, как именно интерпретировать пузырение. Означает ли это подъем вверх по иерархии HTML-кода или что-то еще?
Во-вторых, я просматривал пример и не мог понять последнюю часть, где он говорит
Обработчик щелчков на основе P прослушивает событие щелчка, а затем предотвращает его распространение (всплывание).
Что это значит?
return false;
предотвратит «пузырение». Он используется для остановки действий по умолчанию, таких как установка флажка, открытие выбора, щелчок и т. д.
Чтобы остановить выполнение других обработчиков после одной привязки с использованием .live(), обработчик должен вернуть false. Вызов .stopPropagation() этого не сделает.
Из Предостережения в jQuery .live()
Причина, по которой stopPropagation() не работает с live(), заключается в том, что live() привязывает событие к документу, поэтому к тому времени, когда оно срабатывает, ему больше некуда распространяться.
e.preventDefault(); e.stopPropagation(); мне не помогло (хотя в большинстве случаев вроде бы и так).
- person Ryan; 20.02.2013
stopPropagation() не работает с live(), заключается в том, что live() связывает событие с document, поэтому к тому времени, когда оно срабатывает, ему больше некуда распространяться.
- person AlienWebguy; 22.03.2013
Концепция «всплывания» аналогична ситуации, когда у вас есть дочерний элемент с событием щелчка, и вы не хотите, чтобы он вызывал событие щелчка родительского элемента. Вы можете использовать event.stopPropagation().
event.stopPropagation() в основном говорит, что это событие щелчка следует применять только к ЭТОМУ ДОчернему узлу и ничего не сообщать родительским контейнерам, потому что я не хочу, чтобы они реагировали.
Захват событий:
| |
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 \ / | |
| ------------------------- |
| Event CAPTURING |
-----------------------------------
Всплывающие события:
/ \
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 | | | |
| ------------------------- |
| Event BUBBLING |
-----------------------------------
Если вы используете live() или delegate(), вам потребуется return false;, хотя это может и не сработать. Прочитайте цитату ниже.
Согласно документам jQuery:
Поскольку метод .live() обрабатывает события после их распространения в начало документа, невозможно остановить распространение живых событий. Точно так же события, обрабатываемые .delegate(), будут распространяться на элементы, которым они делегированы; обработчики событий, привязанные к любым элементам ниже него в дереве DOM, уже будут выполнены к моменту вызова делегированного обработчика событий. Таким образом, эти обработчики могут предотвратить срабатывание делегированного обработчика, вызвав event.stopPropagation() или вернув false.
В прошлом это была проблема с платформой, в Internet Explorer использовалась пузырчатая модель, а Netscape был больше связан с захватом (но поддерживал и то, и другое).
модель W3C требует, чтобы вы могли выбирать, какие тот, который вы хотите.
Я думаю, что всплывающее окно более популярно, потому что, как уже говорилось, есть некоторые платформы, которые поддерживают только всплывающее окно... и это имеет смысл как режим «по умолчанию».
Какой из них вы выберете, во многом зависит от того, что вы делаете и что имеет для вас смысл.
Дополнительная информация http://www.quirksmode.org/js/events_order.html
Еще один отличный ресурс: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/
В нем говорится, что метод live () прикрепляет обработчик к элементу document и проверяет target события, чтобы узнать, откуда оно исходит. Если цель соответствует селектору, она запускает обработчик событий. Все это опирается на бурлящую систему событий.
В примере обработчик щелчка по элементу p, который является предком элемента a, отменяет всплытие, возвращая false. Тогда элемент document никогда не получит событие, поэтому он не вызовет обработчик события.
В приведенном ниже примере он прикрепляет событие клика к якорю с идентификатором «якорь». Этот якорь находится внутри div, к которому также прикреплено событие клика. Если мы нажмем на этот якорь, это так же хорошо, как мы нажмем на содержащий его div. Теперь, если мы хотим сделать что-то с этим щелчком привязки, но не хотим, чтобы щелчок div срабатывал, мы можем остановить всплытие события, как показано ниже.
<div id="div">
<a href="google.com" id="anchor"></a>
</div>
$("#div").click(function(e){//On anchor click this event will not be fired as we have stop the event propagation in anchor click handler.
//Do stuff here
});
$("#anchor").click(function(e){
//Do stuff here
//This line stops the event bubling and
//jquery has abstracted it in the event object to make it cross browser compatible.
e.stopPropagation();
});
Также:
event.stopPropagation()
http://api.jquery.com/event.stopPropagation/
Да, событие идет вверх по дереву, и если какой-либо элемент имеет обработчик для этого события, он будет вызван. Добавив return:false в обработчик одного из элементов, событие не будет всплывать.
Эти две ссылки предоставляют четкое и подробное объяснение всплывающей подсказки событий (а также часто используемые концепции событий).
http://jqfundamentals.com/chapter/events
http://www.mattlunn.me.uk/blog/2012/05/what-does-event-bubbling-mean/
событие будет запущено для элемента
a, а также для всех элементов, содержащихa— вплоть доdocument
<div>
<h1>
<a href="#">
<span>Hello</span>
</a>
</h1>
</div>
Предположим, что мы щелкаем по диапазону, что вызывает запуск события щелчка по диапазону; пока ничего революционного. Однако затем событие распространяется (или всплывает) к родительскому элементу диапазона ( ), и для него запускается событие щелчка. Этот процесс повторяется для следующего родителя (или предка) вплоть до элемента документа.
Теперь давайте поместим все это в контекст DOM. DOM - это... дерево, и каждый элемент является узлом в дереве DOM. В этом случае пузырение - это просто обход узла, some element к корневому узлу, document (следуйте за своим родителем, пока не сможете больше)
