Zapobieganie kliknięciu przez div

Question

Mam pojemnik div, który przechowuje kilka "wierszy" danych, z każdym elementem na liście w swoim własnym div "listRow". Używam jQuery do uczynienia div "selectRow" do wyboru, przełączając styl css po kliknięciu. W każdym wierszu znajduje się także element graficzny, który unosi się po prawej stronie nadrzędnego elementu div "listRow" i zawiera zdarzenie onclick. Po kliknięciu elementu div obrazu uruchamiane jest zdarzenie onclick, ale blok nadrzędny "listRow" jest również kliknięty i "wybrany".

Jak mogę zapobiec klikaniu przez mój element graficzny?

pseudo kod html:

<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> 

kod jQuery:

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

Answer 1

byłoby użyć event.stopPropagation():

event.stopPropagation() - Zapobiega zdarzenie od propagacji górę drzewa DOM , zapobieganie powiadamianiu o zdarzeniu wszystkich programów obsługi rodzica.

Na div.listItemIcon „s click() przypadku zapobiegania pęcherzyków zdarzeń:

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

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

jsFiddle example here.

Answer 2

W funkcji click obrazu jeśli chwycić zdarzenie i wykorzystać funkcję stopPropagation() następnie go powinno powstrzymać wydarzenie przed wystrzeleniem rodziców elementu. na przykład.

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