文章/答案/技术大牛

发布

问防止事件冒泡
EN

Stack Overflow用户

提问于 2021-03-26 23:45:20

回答 1查看 48关注 0票数 0

function clickHide(){
    if (MouseEvent.button === 0) hide();
}
function hide(){
    using.style.display = "none";
    hidden.style.display = "none";
}

我对事件冒泡有问题。问题是我有这个函数hide()，它应该只在单击红色div时调用。问题是，当我单击放置在红色div中的黄色div时，它也会被调用。有没有好的方法来防止这种情况发生？我听说过一些关于event.stopPropagation()的事情，但我不知道在这种情况下我该如何使用它。

javascript

events

event-handling

dom-events

event-bubbling

回答 1

Stack Overflow用户

发布于 2021-03-27 00:00:32

您应该使用Event.stopPropagation()。只需在正在侦听的事件上调用stopPropagation()方法即可。

另请参阅here了解更多信息。

编辑:你可以这样尝试，它只会在你点击父元素时触发事件。if语句检查事件的目标是否是父元素，然后调用hide()，如果不是，则不返回任何内容。

const parentElement = document.querySelector(".parentElement");
const childElement = document.querySelector(".childElement");
parentElement.addEventListener("click", clickHide);

function clickHide(event) {
  if(event.target !== parentElement){
      return;
  } 
  hide();
  
}
function hide() {
    parentElement.classList.add('hidden');
}

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="" />
    <style>
      .parentElement {
        border: 20px solid red;
      }

      .childElement {
        background: yellow;
        padding: 20px;
      }

      .hidden {
        display: none;
      }
    </style>
    <script src="test.js" async defer></script>
  </head>

  <body>
    <div class="parentElement">
      <div class="childElement"></div>
    </div>
    
  </body>
</html>

票数 2

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

原文链接：

https://stackoverflow.com/questions/66820093

复制

相似问题

问防止事件冒泡
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问防止事件冒泡EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问防止事件冒泡
EN