Предотвращение нажатия кнопки div

У меня есть контейнер div, который содержит несколько "строк" данных, причем каждый элемент в списке содержит собственный div "listRow" . Я использую jQuery, чтобы сделать "listRow" divs доступным, переключая стиль css при нажатии. Также в каждой строке находится div изображения, который плавает с правой стороны от него родительского divBlueRow и содержит событие onclick. Когда я нажимаю на div изображения, событие onclick запускается, но родительский "listRow" div также щелкает и "выбирается".

Как я могу предотвратить щелчок через мое изображение div?

pseudo html code:

<div class="listContainer">
    <div class="listRow" id="listRow1">
        <div class="listItemName">List item #1</div>
        <div class="listItemIcon"><img src="images/icon.png"></div>
    </div>
    <div class="listRow" id="listRow2">
        <div class="listItemName">List item #2</div>
        <div class="listItemIcon"><img src="images/icon.png"></div>
    </div>
</div>

Код jQuery:

$("div.listRow").click(function(){
    $(this).toggleClass("selected");
})

Ответ 1

Вы использовали бы event.stopPropagation():

event.stopPropagation() - Предотвращает событие, начинающееся с DOM дерево, предотвращающее уведомление родительских обработчиков о событии.

В событии div.listItemIcon click() для предотвращения барботажа событий:

$('div.listItemIcon').click(function(e){
    e.stopPropagation();
});

$("div.listRow").click(function(){
   $(this).toggleClass("selected");
});

Пример jsFiddle здесь.

Ответ 2

В функции щелчка изображения, если вы захватите событие и используете функцию stopPropagation(), тогда он должен удержать событие от активации родительских элементов. например.

$('div.listItemIcon').click(function(e){
    //your code here
    e.stopPropagation();
});