如果 2 个元素是可点击的，我如何强制浏览器只处理顶部链接？答案

【问题标题】：How do I force the browser to only handle the top link if 2 elements are clickable?如果 2 个元素是可点击的，我如何强制浏览器只处理顶部链接？
【发布时间】：2010-02-28 05:19:57
【问题描述】：

假设我有以下代码：

<div onclick='location.href="http://www.example.com/"'>
  <a href='#' onclick='alert("blah")'>click</a>
</div>

有没有办法只在我单击“点击”文本时评估锚点而不评估 div 的 onclick？

【问题讨论】：

我确信您可以使用更好、更简单的替代方法，而不是将 onClick 事件放在也具有 onClick 事件的元素中。如果你真的需要这个功能，你真的应该重新考虑你的设计。

标签： javascript jquery html css anchor

【解决方案1】：

您可以通过从锚点的单击事件处理程序返回 false 来停止事件传播。

<div onclick='location.href="http://www.example.com/"'>
  <a href='#' onclick='alert("blah"); return false;'>click</a>
</div>

你已经用 jQuery 标记了这个问题。在这种情况下，您应该使用不显眼的 Javascript，所以：

<div id="someid">
  <a href="#">click</a>
</div>

与：

$(function() {
  $("#someid").click(function() {
    window.location.href = "http://www.example.com";
  });
  $("#someid a").click(function() {
    alert("blah");
    return false;
  });
});

是一个更清洁的解决方案。

【讨论】：

return false 不会停止事件传播，它只会取消 href 链接。（关于普通的JS；我对jQuery不熟悉）
它也不适用于 jQuery。返回 false 只会停止该特定元素的执行，它不会影响任何其他可能也有事件的元素。这就像在函数中返回 false 一样。它不会仅仅因为一个函数返回 false 就停止执行整个页面，它只是停止该函数。
cletus 已关闭。在点击处理函数中添加一个事件参数，并在函数体中调用 event.preventDefault() 来阻止元素的默认功能。
实际上return false 停止传播（并阻止默认）。
@komforce 试试看。 return false 绝对停止事件传播。尝试注释掉 return false 并查看差异。

【解决方案2】：

见http://www.quirksmode.org/js/events_order.html。

<div onclick='location.href="http://www.example.com/"'>
  <a href='#' onclick='alert("blah"); event.cancelBubble = true; if (event.stopPropagation) event.stopPropagation(); return false;'>click</a>
</div>

event.cancelBubble 适用于 IE
event.stopPropagation() 是 W3C
return false 是取消href链接。

【讨论】：