单击另一个按钮内的按钮时，两个按钮的功能都会运行答案

【问题标题】：When clicking on a button inside another button, the functions for both buttons are run单击另一个按钮内的按钮时，两个按钮的功能都会运行
【发布时间】：2022-07-16 18:55:32
【问题描述】：

我有show-button，当点击它时，它会展开并显示一些文本和collapse-button：

<button id='show-button'>
    <p>Test</p>
    <button id='collapse-button'></button>
</button>

单击show-button 时，它会展开并显示段落和折叠按钮。当点击collapse-button 时，它会折叠回原来的大小并全部隐藏。

问题如下：

当我单击collapse-button 时，click 的事件侦听器运行，一切都崩溃了。但是，由于某种原因，show-button 的事件侦听器也被触发，并且再次显示所有内容。一个循环。您可以显示但不能再次折叠它。

如何确保在按下collapse-button 时，show-button 也不会被触发？

谢谢

【问题讨论】：

标签： javascript html css

【解决方案1】：

在“点击”函数中，您可以停止事件的传播，使其不会到达其他组件
event.stopImmediatePropagation();

【讨论】：

谢谢它的工作。我现在正在编写的 Visual Studio Code 说 event 已弃用。这个对吗？那我应该使用什么新版本。我试过Event，但没用。
如果我假设您使用的是 jquery，您的代码应该将事件作为参数处理 $("#myElement").click(function (event) { event.stopImmediatePropagation() /* your code */ })