Question

I am using JQuery and I have a container (Div) sized 100 by 30,
and an image that is placed within it (sized 20×20).

I want some event handling to take place when the div is clicked
and different event handling to happen when the image is clicked.

I do not want the handler for the div to fire when the click is on the image.

how am I supposed to handle event binding and event propagation ?

Thanks

Answer 1

Either return false; to stop propagation or use 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();
});

See also:

• demonstration
• jQuery documentation: .bind():

Returning false from a handler is equivalent to calling both .preventDefault() and .stopPropagation() on the event object.