如何在JavaScript中防止事件冒泡

Question

感谢阅读...我将直接进入问题。

我有一个附加在图片上的onclick函数。

<div id="mercury" onclick="displayCreations()">

Javascript函数:

function displayCreations(){
   document.getElementById("projects").style.display = "block";
}

我正在显示为块，一旦您到达页面就设置为none。此功能将显示设置为块，这是有效的。

我在为div内的图像创建一个onclick函数时遇到了问题，该函数将display值重置为none。这似乎与我的当前代码不兼容...

HTML：

<div id="mercury" onclick="displayCreations()">
        <img id="exit" onclick="hideCreations()" src="./assets/images/exit.png" alt="exit button" title="Leave Planet: Mercury" />
        <div id="projects">
            <h3>No creator here, but it looks like you've found some his wonderous creations...</h3>
            <ol>
                <li>Project 1</li>
                <li>Project 2</li>
                <li>Project 3</li>
            </ol>
        </div>
    </div>

Javascript:

function displayCreations(){
   document.getElementById("projects").style.display = "block";
}

function hideCreations(){
   document.getElementById("projects").style.display = "none";
}

当我在Google Chrome中运行该站点并单击“退出”按钮时，没有任何反应，并且错误消息中也没有显示任何内容。

此链接将带您到一个著名的网站Gyazo，您可以在其中找到我端看到的gif图像。

链接：链接 我更喜欢当前代码的JavaScript解决方案，并且您或许可以向我解释为什么会发生这种情况，这样我就不会再遇到同样的问题了。

- Andrew Costanzo

---

这是因为你的img位于mercury内部，所以当你点击img（内部元素包含在mercury内部）时，点击事件会冒泡并触发mercury上的点击事件。如果你放置console log行，你就会看到发生了什么。你只需要在img处理程序中停止冒泡即可 https://jsfiddle.net/qmxhfpwh/ - Huangism

@Huangism 那就是问题所在，非常感谢。 - Andrew Costanzo

Answer 1

这是由于事件冒泡引起的。在子元素上触发的事件向上传播到其父元素。在您的情况下，单击图像上的事件也会触发父级div上的单击事件。使用event.stopPropagation()可以防止这种情况发生。

HTML：

将event作为参数传递给事件监听器函数

<img id="exit" onclick="hideCreations(event)" src="./assets/images/exit.png" alt="exit button" title="Leave Planet: Mercury" />

JS：

捕获事件并调用它的stopPropagation方法

function hideCreations(event){
   event.stopPropagation();
   document.getElementById("projects").style.display = "none";
}

- AL-zami

Answer 2

AL-zami提供了一个非常有用的解决方案。它还可以在函数之外使用，例如onclick="event.stopPropagation();yourFunction(existing parameterset)"。因此，您无需更改yourFunction及其参数列表，也不需要更改代码中的其他调用。

甚至可以创建一个额外的容器（例如div）来防止事件冒泡。例如：

  <div id="picBigOLL" onclick="previousPict();">
    <div id="picBigPlay" onclick="event.stopPropagation();">
      <div id="playButsBox">
        <div id="bPPlayL" onclick="diaPB(-1)">
          ⯇
        </div>
        <div id="bPPlayS" onclick="diaPB(0)">
          ||
        </div>
        <div id="bPPlayR" onclick="diaPB(1)">
          ⯈
        </div>
      </div>
    </div>

- Harry Waterschoot

Answer 3

内联属性很糟糕。

试试这样的方法：

//your function
function hideCreations(){
   document.getElementById("projects").style.display = "none";
}
//initializing your website by assigning event-listeners to elements
function init(){
   //assign an listener to the click-event of your element
   document.getElementById("exit").addEventListener("click",function(event){
      //stops all other listeners from firing
      event.stopImmediatePropagation();
      //execute your function
      hideCreations();
   }
}
//calls the init-function, once the document is ready
document.onreadystatechange = init;

更多信息请查看： https://blog.webdevsimplified.com/2022-01/event-listeners/

- Dude