如何防止javascript中的事件冒泡

Question

感谢您的阅读...我会直接讨论这个问题。

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

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

Javascript函数：

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

到达该页面后，我显示为块的 div 将设置为 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 解决方案，也许你可以向我解释为什么会发生这种情况，这样我就不会再次陷入同样的情况。

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";
}

Answer 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>

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/