Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prevent parent container click event from firing when hyperlink clicked [duplicate]

On my web page I have a list of files.

Each file is in it's own container div (div class="file"). Inside the container is a link to the file and a description.

I wanted to allow a user to click anywhere on the container to download the file. I did this by adding a click event to the container and retrieving the href of the child link.

As the file opens in a new window, if the user actually clicks the link, the file opens twice.

So I need to prevent the parent container click event from firing when the hyperlink is clicked. Would the best way of doing this be to add a click function to the hyperlink to0 and set event.stopPropagation? Presumably this would then stop the event from bubbling up to the container.

like image 705
Ben Foster Avatar asked Jan 04 '10 01:01

Ben Foster


2 Answers

In the Microsoft model you must set the event’s cancelBubble property to true.

window.event.cancelBubble = true;

In the W3C model you must call the event’s stopPropagation() method.

event.stopPropagation();

Here's a cross-browser solution if you're not using a framework:

function doSomething(e) {
    if (!e) e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}
like image 63
Luca Matteis Avatar answered Oct 14 '22 20:10

Luca Matteis


Yes, use stopPropagation. See: Prevent execution of parent event handler

like image 21
pix0r Avatar answered Oct 14 '22 21:10

pix0r