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() 来做到这一点

您可以将事件直接绑定到 li，如果页面加载时不存在，则只需将其委托即可。

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