如何防止javascript中的事件冒泡

感谢阅读…我会正确地解决这个问题.

我有一个附加到图像的onclick功能.

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

Javascript功能：

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

一旦你到达页面,我显示为块的div将被设置为none.此功能将显示设置为阻止,这是有效的.

我在为div中的图像设置onclick函数时遇到了麻烦,它将显示值设置为无.这似乎不适用于我目前的代码……

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

当我在谷歌浏览器上运行此站点并单击“退出”按钮时,没有任何反应,错误消息中不显示任何内容.

这个链接带你到一个着名的网站,Gyazo,在那里你可以找到我看到的结果的GIF.

链接：Link

我更喜欢我当前代码的javascript解决方案,也许你可以向我解释为什么会发生这种情况,所以我不会再遇到同样的情况.

解决方法:

它是由于event bubbling引起的.触发一个关于子的事件向上传播到它的父级.在你的情况下,图像上的click事件也会触发父div.use event.stopPropagation()上的click事件以防止这种情况发生.

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

标签：javascript,css,html,event-bubbling,stoppropagation
来源： https://codeday.me/bug/20190622/1263212.html