jquery trigger отключает ссылку в div [duplicate]

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

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>

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

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

Концепция «bubbling up» похожа на то, что у вас есть дочерний элемент с событием клика, и вы не хотите, чтобы он вызывал событие щелчка родителя. Вы можете использовать event.stopPropagation().

event.stopPropagation() в основном говорит только применить это событие click к ЭТОМУ ДЕТСКОГО УЗЛА и не сообщать родительским контейнерам ничего, потому что я не хочу, чтобы они реагировали.

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

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

Событие Bubbling:

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

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

Per jQuery docs :

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

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

W3C model требует, чтобы вы могли выбрать, какой из них вы хотите.

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

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

Дополнительная информация http://www.quirksmode.org/js/events_order.html

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

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

Также:

event.stopPropagation()

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

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

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

В приведенном ниже примере он прикрепляет событие click для привязки с идентификатором «anchor». Этот якорь находится в 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();
});