防止事件冒泡

编程问答 2022-05-16

问题描述

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

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

The divs

解决方法

您应该使用 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>

dom-eventsevent-bubblingevent-handlingeventseventseventsjavascript