在具有 onclick 事件的 div 中保留链接功能答案

【问题标题】：retain links functionality inside a div that has an onclick event在具有 onclick 事件的 div 中保留链接功能
【发布时间】：2012-01-02 08:25:31
【问题描述】：

我有一个div，其中有一个隐藏div 的onclick。

如果我在div 中有一个链接，则该链接不起作用，因为onclick 窃取了点击。

想要的结果：如果在 div 内的任何地方点击链接，则 div 将被隐藏。如果单击链接，那么我希望链接在 _blank 窗口中打开，并且 div 保持可见。

有没有办法用javascript来处理这个问题？

【问题讨论】：

本质上是一样的：stackoverflow.com/questions/387736/…

标签： javascript html onclick

【解决方案1】：

document.getElementById('yourlinksid').onclick = function(e){

   // ... pop your window ...

   /* the following prevents the event from "bubbling up"
      to the div's event handler */
   if(!e.stopPropagation) {
      e.cancelBubble = true;
      return;
   }

   e.stopPropagation();    
};

验证：

http://jsfiddle.net/kSTNT/4/

【讨论】：

这个 JS/jQuery mash 不起作用。 click() 不存在于 getElementById() 上下文中。

【解决方案2】：

DEMO

在链接的点击处理程序中，您需要调用 event.stopPropagation，或将 e.cancelBubble 设置为 true — 无论您的浏览器喜欢哪个。这将防止事件冒泡到您的 div。

document.getElementById("thelink").onclick = function (e) {
    window.open();
    if (e.stopPropogation)
        e.stopPropogation();
    if (e.cancelBubble != null)
        e.cancelBubble = true;
};

【讨论】：

【解决方案3】：

如果你控制链接，最简单的方法是添加 onclick="event.stopPropagation();" （或任何跨浏览器版本）到每个链接，这会阻止 div 看到事件，而不会阻止链接的默认效果发生。

或者，如果链接只包含文本，那么你可以在 div 的点击事件中检查事件目标的标签名称，看看它是否是一个链接，但如果你有更复杂的东西，那么你需要走 dom从事件目标到 div 的树，以验证不存在链接。

【讨论】：