[英]When clicking on a button inside another button, the functions for both buttons are run
I have show-button
that, when clicked, expands and shows some text and a collapse-button
:我有show-button
,单击时会展开并显示一些文本和collapse-button
:
<button id='show-button'>
<p>Test</p>
<button id='collapse-button'></button>
</button>
When show-button
is clicked, it expands and shows the paragraph and the collapse button.单击show-button
时,它会展开并显示段落和折叠按钮。 When the collapse-button
is clicked, it collapses back to the original size where it's all hidden.单击collapse-button
时,它会折叠回隐藏的原始大小。
The problem is the following:问题如下:
When I click on the collapse-button
, the event listener for click
is run and everything collapses.当我单击collapse-button
时, click
的事件侦听器将运行并且一切都崩溃了。 However, for some reason, the event listener of the show-button
is also triggered and everything is shown again.但是,由于某种原因, show-button
的事件侦听器也被触发并再次显示所有内容。 A loop.一个循环。 You can show but never collapse it again.您可以显示但永远不会再次折叠它。
How can I make sure that when collapse-button
is pressed, show-button
isn't also triggered?如何确保按下collapse-button
时不会触发show-button
?
Thanks谢谢
Inside the "click" function you can stop the propagation of the event so it will not reach the other components在“点击”function 内,您可以停止事件的传播,使其不会到达其他组件event.stopImmediatePropagation();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.