时间戳

首页 > 解决方案 > 防止事件冒泡

javascript - 防止事件冒泡

问题描述

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

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

div

标签： javascripteventsevent-handlingdom-eventsevent-bubbling

解决方案

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

另请参阅此处了解更多信息。

编辑：您可以这样尝试，它只会在您单击父元素时触发事件。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>

推荐阅读