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.
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();
}
Yes, use stopPropagation. See: Prevent execution of parent event handler
Thanks for the help.
I was using jQuery but it's good to know a non-framework solution.
Added the following for the links:
$(".flink").click(function(e) {
e.stopPropagation();
});
精彩评论