обработка события click для контейнера и содержащихся html элементов

Question

Я использую JQuery, и у меня есть контейнер (Div) размером 100 на 30 и изображение, помещенное в него (размером 20x20).

Я хочу, чтобы некоторая обработка событий происходила, когда divпри нажатии на изображение происходит различная обработка событий.

Я не хочу, чтобы обработчик для div выполнялся при щелчке по изображению.

как я должен это делатьобрабатывать привязку событий и распространение событий?

Спасибо

Answer 1

Событие щелчка обрабатывается с помощью функции .click () .Вы выбираете что-то, а затем применяете щелчок, как это:

$("#mydiv").click(function(event){
    //do whatever you want when the div is clicked.
});

Чтобы остановить событие «всплывающего» или распространяющегося события, внутри этой функции щелчка вы можете либо закончить с return false, либо использовать Функция event.stopPropagation () для переданной event. Вы хотите применить это к своему изображению, чтобы остановить распространение клика до div.

Answer 2

Либо return false;, чтобы остановить распространение, либо используйте event.stopPropagation():

<div id="mydiv">
    <p>Your div</p>
    <img alt="your image" />
    <span>A span inside the div</span>
</div>

$("#mydiv").click(function(){
    alert("You clicked on the div element");
});

$("#mydiv > img").click(function(e){
    alert("You clicked on a img inside the div element");
    return false; /* will prevent the browser default action! */
});
$("#mydiv > span").click(function(e){
    alert("You clicked on a span inside the div element");
    e.stopPropagation();
});

Смотри также:

• демонстрация
• Документация jQuery: .bind():

  Возвращение false из обработчика эквивалентно вызову .preventDefault() и .stopPropagation() для объекта события.

Answer 3

Необходимо остановить распространение события click на изображении:

$("#yourImage").click(function(e) {
    e.stopPropagation();
    //Do stuff on image click
});
$("#yourDiv").click(function() {
    //Do stuff on div click
});

Так как события DOM всплывают в дереве, любой щелчок по дочернему элементу (img в вашем случае) всплывает через любые элементы-предки (div в вашем случае). Вызов stopPropagation для объекта события предотвращается, и событие остается там, где оно есть.

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