Verhindern Klicken durch div

Question

Ich habe einen div-Container, der mehrere "Zeilen" von Daten enthält, mit jedem Element in der Liste in seinem eigenen "listRow" div. Ich benutze jQuery, um die "listRow" -Divs auswählbar zu machen, indem der CSS-Stil beim Anklicken umgeschaltet wird. Außerdem befindet sich in jeder Zeile ein Bild-Div, das auf der rechten Seite des übergeordneten div-Elements "listRow" schwebt und ein onclick-Ereignis enthält. Wenn ich auf das Bild div klicke, wird das onclick-Ereignis ausgelöst, aber das übergeordnete div-Element "listRow" wird ebenfalls angeklickt und "ausgewählt".

Wie kann ich verhindern, durch mein Bild div zu klicken?

HTML-Code pseudo:

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

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

Answer 1

Sie event.stopPropagation() verwenden würde:

event.stopPropagation() - Verhindert, dass das Ereignis aus Einblasen des DOM Baum, Verhindern, dass Elternhandler über das Ereignis benachrichtigt werden.

Auf der div.listItemIcon ‚s click() Ereignis das Ereignis Blubbern zu verhindern:

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

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

jsFiddle example here.

Answer 2

Klicken Sie in der Funktion des Bildes, wenn Sie die Veranstaltung und nutzen die es stopPropagation() Funktion greifen dann sollte verhindern, dass das Ereignis die Eltern des Elements auslöst. z.B.

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