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

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


jquery onmousedown
person Phil Jackson    schedule 18.07.2011    source источник
comment
Где эти div, где ваш код, пожалуйста, поделитесь кодом, если вам нужно решение, а не просто описывайте его.   -  person Shef    schedule 18.07.2011

Ответы (3)


arrow_upward
1
arrow_downward

Вы можете остановить распространение кликов вложенных 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/.

person karim79    schedule 18.07.2011
comment
Я не думаю, что это сработает, так как это не наращивание, это 2 отдельных элемента. - person Phil Jackson; 18.07.2011

arrow_upward
1
arrow_downward

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

body
   firstDiv
      secondDiv

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

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

person Saeed Neamati    schedule 18.07.2011

arrow_upward
0
arrow_downward

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

Ознакомьтесь с jsFiddle: http://jsfiddle.net/aPMB3/

person Grezzo    schedule 18.07.2011