首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何停止div中的onclick事件传播到文档?

如何停止div中的onclick事件传播到文档?
EN

Stack Overflow用户
提问于 2010-06-20 02:05:12
回答 6查看 49.8K关注 0票数 18

我想要停止将此div的onclick事件传播到文档?当用户单击"div“时,两个警报都会出现: 1) div的警报和2)文档的警报。我想抑制文档警报。

我知道如何使用addEventListener来做这件事,但是有没有其他方法呢?下面的问题是我不知道如何获取事件--我尝试了"event = element.onclick",如下所示,但它不起作用。如何获取事件?

代码语言:javascript
复制
<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>
EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2010-06-20 02:17:40

更改函数定义以包含事件:

代码语言:javascript
复制
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
  }
}

然后将调用更改为在事件中传递:

代码语言:javascript
复制
div id="fooddmenu" onclick="showMenu(event, this);">Click inside this div</div>
票数 28
EN

Stack Overflow用户

发布于 2010-06-20 02:43:47

试试EventListeners:

html:

代码语言:javascript
复制
<div id="fooddmenu">Click inside this div</div>or click outside the div.​​​​​​​​​​

js:

代码语言:javascript
复制
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();

    });
};
票数 2
EN

Stack Overflow用户

发布于 2010-06-20 02:07:53

将onclick添加到body元素。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3076642

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档