Prevent parent container click event from firing when hyperlink clicked

Question

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.

Answer 1

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

Answer 2

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

Answer 3

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