CODEWITHSUNDEEP
javascriptdom-events
ep4169
ep4169

Reputation: 2365

Multiple events firing from single action

I have an onclick event attached to a region in my page that causes a certain action to fire when the user clicks in it (naturally). I recently added an image to that region. When the user clicks on that image, I want another action to occur, and I do NOT want the action associated with the entire region to occur. However, I find that both events are, in fact fired when one clicks the image. How do I suppress the region-wide action when the image is clicked?

Upvotes: 1

Views: 4285

Answers (3)

d4nt
d4nt

Reputation: 15769

In the event handler for the image do

event.cancelBubble = true;

and then at the end do

return false;

Upvotes: 1

James
James

Reputation: 111920

Darit is correct, you need to stop the event from bubbling (propagating):

function imgEventHandler(e) {
    // ^notice: pass 'e' (W3C event)

    // W3C:
    e.stopPropagation();

    // IE:
    if (window.event) {
        window.event.cancelBubble = true;
    }

}

Upvotes: 4

Dan Herbert
Dan Herbert

Reputation: 103427

The issue you are running into is known as event bubbling. The click event of the image bubbles up to all parent elements of that node. You want to cancel bubbling.

The best way to do this that works across all browsers is by using a JavaScript framework. jQuery has a very simple way to do this. Other frameworks have similar mechanisms to cancel bubbling, I just happen to be most familiar with jQuery.

For example, you could do something like this in jQuery:

$('img').click(function () {
    // Do some stuff

    return false;// <- Cancels bubbling to parent elements.
});

Upvotes: 5

Related Questions