点击同时触发两个onclick事件[重复]

Posted 2023-02-21

技术标签:

【中文标题】点击同时触发两个onclick事件[重复]【英文标题】：Click triggers two onclick events at the same time [duplicate] 【发布时间】：2014-07-27 19:47:06 【问题描述】：

我在一个 div 之上有一个 span。 div有onclick事件，span也有onclick事件。如果我点击跨度，我只希望触发 span-onclick 事件，不幸的是，div 的 onclick 和跨度之一都被触发。如何解决这个问题？

        <div class="listRow" onclick="document.location = 'index.php?c=rooms&a=displayForm&roomID=3&returnTo=%2FschoolTool%2Findex.php%3Fc%3Drooms%26a%3DshowList';">
            <span class="tools listCell">
                <span class="tool" onclick="if(confirm('Vil du virkelig slette dette rommet?'))  document.location = 'index.php?c=rooms&a=delete&roomID=3'; ">
                    Slett
                </span>
            </span>
        </div>

【问题讨论】：

好吧，如果你在一个onclick里面放一个onclick，你会得到2个onclicks.. 附注，您应该尽可能避免使用内联 javascript。 【参考方案1】：

您正在寻找的答案很简单，但我会给您提供更广泛的建议。

首先，您应该将 Javascript 与 html 分开。内联 Javascript 通常被认为不好，see here for example。

将 Javascript 移至单独的文件后，只需将方法放入变量中并从 onclick 处理程序中调用它们。我做了一个simple fiddle to demonstrate this。

现在，您正在寻找的实际答案是 stopPropagation() 方法。这会在事件对象上调用以阻止它冒泡 DOM 并再次被处理。这是基本的答案，从stopImmediatePropagation() 和preventDefault() 的主题经常弹出。所以我建议阅读相关的 jquery 文档并查看我写的 this blog post :)

希望这有助于回答您的问题并使您成为更好的开发人员！干杯！

【讨论】：

【参考方案2】：

stopPropagation() 方法停止将事件冒泡到父元素，防止任何父处理程序收到事件通知。

您可以使用 event.isPropagationStopped() 方法来了解此方法是否曾被调用（在该事件对象上）。

语法：