如何防止 javascript 中的事件冒泡

Question

感谢阅读...我会直接进入这个问题。

我有一个附加到图像的 onclick 函数。

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

Javascript函数：

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

当您到达该页面后，我显示为块的 div 设置为 none。此函数将显示设置为块，有效。

我在为 div 中的图像创建 onclick 函数时遇到问题，它设置了显示值回到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 上点击 'exit' 按钮时，没有任何反应，也没有任何反应显示在错误消息中。

这 link 会将您带到一个著名的网站 Gyazo，您可以在其中找到我在这边看到的 gif。

Link: Link

对于我当前的代码，我更喜欢 javascript 解决方案，也许您可以向我解释为什么会这样，这样我就不会再次遇到同样的情况。

Answer 1

这是由于 event bubbling 引起的。触发子事件会向上传播到它的 parent.In 您的案例图像上的点击事件也会触发父事件 div.use 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";
}

Answer 2

来自 AL-zami 的一个非常有用的解决方案。它在函数之外也很有用，例如onclick="event.stopPropagation();yourFunction(existing parameterset)"。所以你不需要改变你的函数和它的参数列表，也不需要在代码中改变它的其他调用。甚至可以围绕不同的事件创建一个额外的容器（例如 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>

如何防止 javascript 中的事件冒泡

How to prevent event bubbling in javascript

html

javascript

css

event-bubbling

stoppropagation