Question

我想停止将此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>

Answer 1

更改您的功能定义以包含事件：

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>

Answer 2

尝试事件监听器：

HTML：

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

是：

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();

    });
};

Answer 3

将onclick添加到body元素。

Answer 4

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

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

Answer 5

道格拉斯它确实可以阻止事件冒泡。

查看http://jsbin.com/ahoyi/edit

在这里，如果您对alert语句发表评论，它会在点击较小的框时显示2个警告，否则只显示一个。

希望这有帮助。

Answer 6

嗯，这是一个jquery代码。 $（“＃id”）与document.getElementById（“id”）

相同

.click函数与addEvent（“click”，function（）{...}）相同;

所以基本上这两个函数都有Parent和Child DIV的点击处理程序。

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

希望有所帮助。

顺便说一句，抱歉这个“$”混乱。

Answer 7

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

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

7 个答案: