Question

感谢阅读...我会正确处理这个问题。

我有一个 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";
}

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

此链接将您带到一个着名的网站Gyazo，在那里您可以找到我在我看到的内容的GIF。

链接：Link

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

Answer 1

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

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>

如何防止javascript中的事件冒泡

2 个答案: