如何阻止 div 中的 onclick 事件传播到文档？答案

【问题标题】：How to stop onclick event in div from propagating to the document?如何阻止 div 中的 onclick 事件传播到文档？
【发布时间】：2011-03-05 20:01:22
【问题描述】：

我想停止将此 div 的 onclick 事件传播到文档吗？当用户单击“div”时，会出现两个警报：1）div 的警报和 2）文档的警报。我想取消文档警报。

我知道如何使用 addEventListener 来做到这一点，但还有其他方法吗？下面的问题是我不知道如何获取事件——我尝试了“event = element.onclick”，如下所示，但这不起作用。如何获得活动？

<head>
<script>
  function showMenu(element) {
      alert("div clicked");
      event = element.onclick;  // HOW TO GET HOLD OF THE EVENT?
      // Don't propogate the event to the document
      if (event.stopPropagation) {
          event.stopPropagation();   // W3C model
      } else {
          event.cancelBubble = true; // IE model
      }
  }

  document.onclick = function() {
      alert('document clicked');
  };
</script>
</head>

<body>
  <div id="foodmenu" onclick="showMenu(this);">Click inside this div</div>
  or click outside the div.
</body>

【问题讨论】：

标签： javascript

【解决方案1】：

将 Pointer-events: none 添加到特定元素。

【讨论】：

【解决方案2】：

嗯，这是一个 jquery 代码。 $("#id") 等同于 document.getElementById("id")

.click 函数同 addEvent("click", function() { ... } );

所以基本上这两个函数都有针对父 DIV 和子 DIV 的点击处理程序。

通过注释/取消注释“return false;”来观察输出声明。

希望对您有所帮助。

顺便说一下，对于“$”的混淆，我们深表歉意。

【讨论】：

【解决方案3】：

道格拉斯，它确实阻止了事件被冒泡。

看看这个http://jsbin.com/ahoyi/edit

在这里，如果您对警报声明进行评论，它会在单击较小的框时显示 2 个警报，否则只有一个。

希望这会有所帮助。

【讨论】：

感谢您向我展示这一点。我不清楚美元符号 '$' 的作用。我尝试用 document.getElementById("parent") 替换它，但出现错误：“Object # has no method 'click'”

【解决方案4】：

$("div").click(function(){
  ...
  ...
  ...

  return false; //this will stop the further propagation of the event
});

【讨论】：

我对此进行了调查，似乎“返回 false”并没有阻止事件的进一步传播。它只是阻止默认操作生效，这是不同的。例如，如果您单击一个链接，“return false”将阻止浏览器跟踪该链接，但不会阻止事件冒泡到可能触发 document.click=function() {alert("嗨");};

【解决方案5】：

试试事件监听器：

html:

<div id="fooddmenu">Click inside this div</div>or click outside the div.

js:

function showMenu(e) {
    alert("div clicked");
}

document.onclick = function() {
    alert('document clicked');
};

window.onload = function(){
    document.getElementById("fooddmenu").addEventListener("click", function(e){
        showMenu(this);
        e.stopPropagation();

    });
};

【讨论】：

【解决方案6】：

更改您的函数定义以包含事件：

function showMenu(event, element) {
  alert("div clicked");
  // Don't propogate the event to the document
  if (event.stopPropagation) {
      event.stopPropagation();   // W3C model
  } else {
      event.cancelBubble = true; // IE model
  }
}

然后改变调用传入事件：

div id="fooddmenu" onclick="showMenu(event, this);">Click inside this div</div>

【讨论】：

太棒了！我试过你的修复，它有效！太感谢了。如果您愿意，请跟进。我花了几个小时搜索和阅读 quirksmode 和书籍章节，但在任何地方都找不到这个答案。权威参考在哪里声明事件处理程序的第一个参数是事件？（这里的“事件”是保留关键字吗？）
它不必是第一个参数。顺序由 HTML 中的事件设置决定，例如如果你使用了onclick="showMenu(this, event);"，那么第二个参数就是事件数据。
太棒了！所以看起来“事件”是一个保留的参数，比如“这个”。我还是很好奇哪个网站是事件参数的权威参考。我看过 w3c.org 和 mozilla。
我写给相关问题的这个答案是相关的：stackoverflow.com/questions/2196299/…
谢谢，蒂姆，这很有帮助。万岁，我实际上正在寻找明确的参考，指出事件是传递给事件处理程序的保留标识符，而不是某些开发人员的手册。顺便说一句，我查看了 crockford，但它说“某些浏览器将事件对象作为参数传递给事件处理程序。微软选择将事件对象放在全局事件变量中。”相反，我有 IE 7 确实接受传递给事件处理程序的事件的代码。

【解决方案7】：

将 onclick 添加到 body 元素。

【讨论】：