в jQuery всплывающие события

Я хочу понять, как именно интерпретировать клокотать. Означает ли это повышение иерархии кода HTML или что-то еще?

во-вторых, я шел через пример и я не мог понять последнюю часть, где он говорит:

обработчик кликов на основе P прослушивает событие click, а затем предотвращает его распространение (пузырящееся)

Что это значит?

17
event-bubbling javascript javascript-events jquery live

7 ответов

return false;

помешает "булькает". Он используется для остановки действий по умолчанию, таких как проверка флажка, открытие выбора, щелчок и т. д.

чтобы остановить дальнейшие обработчики от выполнения после одной привязки с помощью .жить(), обработчик должен вернуть false. Зовущий.stopPropagation() не будет добиться этого.

С предостережения в jQuery .live ()

Рассуждения (благодаря @AlienWebguy):

причина stopPropagation() не работает с live() это live() связывает событие с документом, поэтому к моменту его запуска нет другого места для его распространения.

7

понятие "пузыриться" похоже на то, что у вас есть дочерний элемент с событием click, и вы не хотите, чтобы он запускал событие click родителя. Вы могли бы использовать event.stopPropagation().

event.stopPropagation() в основном говорит только применить это событие click к этому дочернему узлу и ничего не говорить родительским контейнерам, потому что я не хочу, чтобы они реагировали.

Захват События:

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

Событие Клокоча:

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

если вы используем live() или delegate() вам понадобится return false;, хотя это может не сработать. Прочитайте цитату ниже.

Per jQuery docs:

так .метод live () обрабатывает события после их распространения на в верхней части документа невозможно остановить распространение живой турнир. Аналогично, события обрабатываются .делегат() будет распространяться элементам, которым они делегированы; обработчики событий, привязанные к любые элементы под ним в Дерево DOM уже будет выполнено к моменту вызова обработчика делегированных событий. Этот обработчик, таким образом может предотвратить запуск делегированного обработчика с помощью вызов события.stopPropagation () или возврат false.

в прошлом это была проблема платформы, Internet Explorer имел пузырящуюся модель, а Netscape был больше о захвате (но поддерживал оба).

на консорциумом W3C модель звонки для вас быть в состоянии выбрать, какой из них вы хотеть.

Я думаю, что bubbling более популярен, потому что, как указано, есть некоторые платформы, которые поддерживают только bubbling...и это имеет смысл как режим "по умолчанию".

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

Подробнее http://www.quirksmode.org/js/events_order.html

еще один отличный ресурс: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

37

он говорит, что live () метод прикрепить обработчик к document элемент и проверяем target события, чтобы увидеть, откуда она берется. Если целевой объект соответствует селектору, он запускает eventHandler. Все это покоится на пузырящейся системе событий.

в Примере, обработчик щелчка на p элемент, ведьма является предком a элемент, отмените пузырение, вернув false. Тогда document элемент никогда не получит событие, поэтому он не будет вызывать обработчик событий.

2

в приведенном ниже примере он присоединяет событие click к якорю с идентификатором "якорь". Этот якорь находится в div, который также имеет прикрепленное событие click. Если мы нажмем на этот якорь, это так же хорошо, как мы нажимаем на содержащий 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();
});
1

также:

event.stopPropagation()

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

0

да, событие поднимается по дереву, и если какой-либо элемент имеет обработчик для этого события, он будет вызван. Путем добавления return:false в обработчике одного из элементов событие будет предотвращено от пузырьков.

0

эти две ссылки обеспечивают четкое и подробное объяснение событий пузырящихся (а также часто используемые концепции событий).

http://jqfundamentals.com/chapter/events
http://www.mattlunn.me.uk/blog/2012/05/what-does-event-bubbling-mean/

из первой ссылки

событие будет срабатывать для a элемент, а также для всех элементы, которые содержат a - вплоть до the document

из второй ссылки

<div>
    <h1>
        <a href="#">
            <span>Hello</span>
        </a>
    </h1>
</div>

предположим, мы щелкаем промежуток, который вызывает событие щелчка, которое будет запущено на промежутке; ничего революционного до сих пор. Однако затем событие распространяется (или пузырьки) на родительский элемент span (THE), и на нем запускается событие click. Этот процесс повторяется для следующего родителя (или предка) до элемента document.

теперь давайте поместим все это в контекст DOM. Этот Дом-это... дерево и каждый элемент является узлом в дереве DOM. Пузырение-это просто обход узла,some element к корневому узлу,document (следуйте за своим родителем, пока вы не можете больше)

0