javascript - 如何防止指针在 HTML 中通过？

Question

我有一个文本的无序列表，例如:

<a href="http://google.com">
  <ul>
    <li>OK</li>
  </ul>
</a>

无序列表使用 css 绝对定位在文本之上

a {
  position:relative;
}
ul {
  position: absolute;
  top:0;
  left:0;
}

然后我使用 jQuery 的 .on 函数让 li 响应点击:

$(document).on("click", "li", function() {
  alert('hello');
});

但是，当我点击 li 时，a 中的链接也被点击并使我转到 google.com。

点击li时如何阻止a中的链接？

可在以下位置找到演示:http://jsfiddle.net/jfq8L/

Answer 1

您需要做的是阻止事件在树上冒泡。你可以用 stopPropagation() 做到这一点

并且您可以将事件直接绑定(bind)到 li，如果它在页面加载时不存在，您只需要委托(delegate)它。

$('li').on("click", function(e) {
    e.stopPropagation();
    alert('hello');
});