javascript - 单击 div 内的链接触发 div 的 onclick

Question

我有一个简单的问题:一个包含链接的 div，并且该 div 定义了一个 onclick 函数。然而，当我点击链接时，我只想跟随链接，而不是触发包含 div 的功能。

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
}

所以在这里，当我单击 div 时，会显示一个警告:没关系。单击链接时，我不希望显示警报。

如何避免这种情况？

Answer 1

您可以将 event.stopImmediatePropagation(); 应用于链接。根据 API，这会阻止其余的处理程序被执行，并防止事件冒泡到 DOM 树 (https://api.jquery.com/event.stopimmediatepropagation/)。

这是 fiddle :http://jsfiddle.net/dxrdrqrc/