如何防止javascript中的事件冒泡答案

【问题标题】：How to prevent event bubbling in javascript如何防止javascript中的事件冒泡
【发布时间】：2023-03-21 08:26:01
【问题描述】：

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

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

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

Javascript 函数：

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

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

我在为 div 内的图像创建 onclick 函数时遇到问题，该函数将 display 值设置回没有。这似乎不适用于我当前的代码...

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。

链接：Link

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

【问题讨论】：

这是因为你的img在水银里面，所以当你点击img（水银里面的内部元素）时，点击事件会冒泡并触发水银上的点击事件。如果您放置控制台日志行，您将看到发生了什么。您只需要停止 img 处理程序中的冒泡jsfiddle.net/qmxhfpwh
@Huangism 就是这个问题，非常感谢。

标签： javascript html css event-bubbling stoppropagation

【解决方案1】：

这是由于event bubbling引起的。触发子级事件向上传播到其父级。在您的情况下，图像上的单击事件也会触发父级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";
}

【讨论】：

【解决方案2】：

AL-zami 提供的一个非常有用的解决方案。它在函数之外也很有用，例如onclick="event.stopPropagation();yourFunction(现有参数集)"。因此，您无需更改 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>

【讨论】：