Выполнение действия над родительскими / дочерними элементами самостоятельно

Question

У меня есть HTML похожий на следующий на моей странице

<div id="someDiv">
    <img src="foo.gif" class="someImg" />
</div>

Оболочка div настроена таким образом, что при нажатии на нее background-color изменяется с использованием следующего кода jQuery.

$("div").click(function(event){
    $(this).css("background-color", "blue");
});

У меня также есть некоторый jQuery, связанный с моим img, который будет выполнять какую-то другую функцию (ради аргумента, который я собираюсь отобразить и вывести предупреждение), например:

$("img[class=someImg]").click(function(event){
    alert("Image clicked");
});

Проблема, с которой я столкнулся, заключается в том, что при нажатии на img также запускается событие, связанное с div. Я вполне уверен, что это связано с тем, что jQuery (или, действительно, JavaScript) обрабатывает два элемента DOM - нажатие img потребует от вас также технически щелчка div запуск обоих событий.

Два вопроса тогда действительно:

1. Мое понимание DOM / JavaScript каким-то образом некорректен или это на самом деле, как вещи происходящий
2. Существуют ли какие-либо методы jQuery, которые позволит мне выполнять действия на дочерний элемент без вызова кто связан с его родителем?

Answer 1

Это известно как всплеск событий , вы можете предотвратить его с помощью stopPropagation():

$("img[class=someImg]").click(function(event){
    alert("Image clicked");
    event.stopPropagation();
});

.

1. Является ли мое понимание DOM / JavaScript ошибочным или это на самом деле, как вещи происходит?

Это из-за того, что известно всплывающее событие .

2. Существуют ли методы jQuery, которые позволили бы мне выполнять действия на дочерний элемент без вызова кто связан с его родителем?

Да, вам нужно stopPropagation()

Answer 2

Проблема, с которой вы только что столкнулись, называется "пузырем событий". Это означает, что если вы нажмете на вложенный элемент, это событие клика будет «всплывать» дерево DOM. Если другие элементы также связаны с событием щелчка, их слушатели также будут активированы.

Решение для предотвращения этого называется:

stopPropagation ()

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

$("img[class=someImg]").click(function(event){
   event.stopPropagation();
   alert("Image clicked");
});

Answer 3

1. Нет, это по замыслу. События всплывают через весь дом, если вы поместите другой обработчик на тело, он тоже сработает
2. Да :) JQuery нормализует объект события, поэтому добавление event.stopPropagation() в ваш обработчик кликов img даст вам ожидаемое поведение во всех браузерах

Answer 4

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

$("img[class=someImg]").click(function(event){
  alert("Image clicked");
  event.stopPropagation();
});

Вы можете просмотреть демо здесь , закомментировать его и нажать кнопку «Выполнить» еще раз, чтобы увидеть разницу.

Короче говоря, когда происходит большинство типов событий, они происходят в непосредственном элементе, а затем всплывают DOM, возникающие у каждого родителя по мере их прохождения. Это не специфично для jQuery, это делает нативный JavaScript. Если вам интереснее, Я бы прочитал связанную статью, в ней есть отличное объяснение того, что происходит .