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.

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.

Thanks Ben

Answer 1

Yes, use stopPropagation. See: http://stackoverflow.com/questions/1398582/how-to-disable-parent-click

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 closs-browser solution if you're not using a framework:

function doSomething(e)
{
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

Answer 3

Thanks for the help.

I was using jQuery but good to understand non framework solution.

Added the following for the links:

    $(".flink").click(function(e) {
        e.stopPropagation();
    });

Ben