jquery - предотвращает накопление муссона с перекрывающимися элементами.

Question

Допустим, у меня есть div, вложенный в другой div, и у меня есть событие mousedown, которое вызывает оповещение при нажатии на любой из div.Естественно, предупреждение отображается дважды одним щелчком мыши, так как элементы div являются вложенными.Как я могу предотвратить это, чтобы предупредить только один раз?

Answer 1

$('div').click(function(e) {
      e.stopPropagation();
     //
     //do what you want
});

Answer 2

Когда два элемента div вложены, мы имеем иерархию элементов HTML. Что-то вроде:

body
   firstDiv
      secondDiv

, в котором secondDiv встроен в firstDiv, который, в свою очередь, встроен в body. Теперь, когда вы нажимаете на secondDiv, firstDiv также нажимается, и тело также щелкается. Итак, если вы создадите 3 обработчика событий для этих 3 элементов (скажем, покажите 3 оповещения), вы получите 3 оповещения. Это явление называется пузырящимся , потому что если вы представляете, что эти элементы представляют собой слои воды (с более глубокими дочерними элементами), и рассматриваете событие (как щелчок) как пузырь, когда вы освобождаете пузыри на нижних слоях, он пузырится до верхних слоев, пока не достигнет поверхности (элемент HTML или даже выше, объект документа и объект окна, который является корневым объектом).

с jQuery, вы можете использовать функцию e.stopPropagation (), чтобы отменить всплывание. В чистом JavaScript вы используете return false;, чтобы остановить пузыри.

Answer 3

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

// attach to all divs
$("div").mousedown(function() {
    // do stuff
});

// stop propagation for nested divs
$("div div").mousedown(function(e) {
    e.stopPropagation()
});

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

Answer 4

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

Проверьте jsFiddle: http://jsfiddle.net/aPMB3/