如何防止javascript中的事件冒泡

Posted 2023-05-07

【中文标题】如何防止javascript中的事件冒泡

【英文标题】：How to prevent event bubbling in javascript

【发布时间】：2018-06-27 23:31:07

【问题描述】：

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

我有一个附加到图像的 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"  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 就是这个问题，非常感谢。

【参考方案1】：

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

HTML：

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

<img id="exit" onclick="hideCreations(event)" src="./assets/images/exit.png"  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>