javascript - 如何防止javascript中的事件冒泡

Question

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

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

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

Javascript 函数:

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

当您到达页面时，我显示为 block 的 div 设置为无。此函数将显示设置为 block ，有效。

我在为 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 解决方案，也许你可以向我解释为什么会这样，这样我就不会再遇到同样的情况。

Answer 1

这是由于event bubbling引起的.Triggering an event on child propagates upward to its parents.In your case click event on image also trigger click event on parent div.use event.stopPropagation() 防止这种情况发生从发生。

HTML :

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

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