Clicking link inside div firing div's onclick

Question

I have this simple issue: a div that contains a link, and the div has an onclick function defined. However, when I click the link, I just want to follow the link, and not fire the containing div's function.

Fiddle

HTML

<div>
  <a href="http://www.google.com" target="_blank">Google</a>
</div>

JQuery

$('div').click(function() {
  alert("test");
});

CSS

div {
  height: 100px;
  width: 200px;
  border: 1px solid red
}

So here, when I click the div, an alert is shown: that's fine. When the link is clicked, I don't want the alert to show.

How to avoid this?

Answer 1

You can apply event.stopImmediatePropagation(); to the link. According to the API, this keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree (https://api.jquery.com/event.stopimmediatepropagation/).

Here is the fiddle: http://jsfiddle.net/dxrdrqrc/