Prevent clicking through div

Question

I have a div container, which holds several "rows" of data, with each item in the list in it's own "listRow" div. I'm using jQuery to make the "listRow" divs selectable, by toggling the css styling when clicked. Also within each row is an image div that floats on the right side of it's parent "listRow" div and contains an onclick event. When I click on the image div, the onclick event fires, but the parent "listRow" div is also clicked and "selected".

How can I prevent from clicking through my image 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 code:

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

Answer 1

You'd use event.stopPropagation():

event.stopPropagation() - Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

On the div.listItemIcon's click() event to prevent the event bubbling:

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

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

jsFiddle example here.

Answer 2

In the click function of the image if you grab the event and use the stopPropagation() function then it should keep the event from firing the the element's parents. eg.

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