开发者

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

This question already has answers here: Prevent execution of parent event handler (3 answers) 开发者_开发知识库 Closed last year.

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();
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜