Question

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

如果我有这种（简化）情况：

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

...有什么（方便的）方法可以防止在点击链接时触发父div的onclick-handler。

在我的场景中，我有一个很大的包装div，它与onclick-handler一起构成了一个“链接”，但我想覆盖一些包含链接的文本数据，但至少在Firefox中我点击文本中的链接，首先执行父级的onclick。

Answer 1

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

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

Answer 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 ...

  }
}

Answer 3

恕我直言，这是一个糟糕的HTML /行为嵌套。整个div可以单击为1个元素，或链接是，但不是两个...除非你“取消嵌套”它们。

使用onclick-handlers链接元素之上

3 个答案: