带有 onclick 处理程序的元素顶部的链接答案

【问题标题】：Links on top of elements with onclick-handlers带有 onclick 处理程序的元素顶部的链接
【发布时间】：2009-04-21 20:05:20
【问题描述】：

嘿。我有一个愚蠢但令人讨厌的问题。

如果我遇到这种（简化的）情况：

<div onclick="doSomething(); return false;">
    lorem ipsum <a href="somewhere.html">dolor sit</a> amet
</div>

...是否有任何（方便的）方法可以防止在单击链接时触发父 div 的 onclick-handler。

在我的场景中，我有一个大的包装 div，它被制作成一个带有 onclick 处理程序的“链接”，但我想用其中的链接覆盖一些文本数据，但至少在 Firefox 中我点击文中的链接，先执行父级的onclick。

【问题讨论】：

标签： javascript html

【解决方案1】：

使用 jQuery，您可以为每个锚点添加点击处理程序，并使用 event.stopPropagation() 防止事件冒泡到 DIV。

   $('div#wrapperDiv > a').click( function(event) {
       event.stopPropagation();
   });

【讨论】：

事件冒泡是问题 - brainjar.com/dhtml/events/default2.asp

【解决方案2】：

您可以通过在处理程序中测试事件的原始目标来解决此问题。大致如下：

function doSomething ( e ) {
  // get event object and target element
  var e = e || window.event;
  var target = e.srcElement || e.target;
  // is target a div?
  if ( target && /^div$/i.test( target.nodeName ) ) {

    // do your magic in here ...

  }
}

【讨论】：

【解决方案3】：

恕我直言，这是 HTML/行为的错误嵌套。要么整个 div 可以作为 1 个元素点击，要么链接可以点击，但不能同时点击...除非你“取消嵌套”它们。

【讨论】：

我认为 OP 认识到了这一点（参见“dumb...problem”）。