防止事件冒泡答案

【问题标题】：Preventing event bubbling防止事件冒泡
【发布时间】：2021-03-26 15:45:19
【问题描述】：

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】：

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

【讨论】：

event.stopPropagation() 方法是否必须在不同的函数中？因为当我将它放在我的 clickHide() 函数中时，它似乎不起作用。
您可以将事件作为参数传递给附加到您的AddEventListener 的函数。在您的情况下，我假设在事件侦听器中引用了clickHide()，我假设它看起来像这样addEventListener('click', clickHide)，然后您可以简单地执行function clickHide(event) { event.stopPropagation()}
非常感谢！
所以我只是尝试了这个，但问题是事件仅在调用函数时才停止传播。但是单击父元素时执行的函数，在我单击子元素时根本不应该被调用：D