Javascript 避免可悬停内容的单击事件触发父元素的单击事件

如果我有这样的布局：

html

    <div class="container" onclick="alert('clicked in the container');">
     <img src="notebook.jpg" alt="Notebook" style="width:100%;">
     <div class="content">
       <button type="button" name="button" onclick="action(event, this);">test1</button> <button type="button" name="button" style="float: right;" onclick="action(event, this);">test2</button>
     </div>
   </div>

   <script type="text/javascript">
     function action(evt, elem) {
       evt.preventDefault();
       alert('clicked in '+elem.innerText);
     }
   </script>

---

当我单击可悬停的

.content

div中的任何按钮时，父元素的事件单击没有被触发，我能做什么？现在，当我这样做时，会显示两个警报，显示消息“click in test x”，然后是“click in the container”。

您应该停止事件传播（冒泡），因此您的父组件将不会触发

尽管你不需要它，你还是应该摆脱它

<script type="text/javascript">
         function action(evt, elem) {
           evt.preventDefault();
           evt.stopPropagation();
           evt.stopImmediatePropagation();
           alert('clicked in '+elem.innerText);
         }
</script>

功能动作（evt、elem）{
evt.preventDefault（）；
evt.stopPropagation（）；
evt.stopImmediatePropagation（）；
警报（'在'+elem.innerText'中单击）；
}

您应该停止事件传播（冒泡），因此您的父组件将不会触发

尽管你不需要它，你还是应该摆脱它

<script type="text/javascript">
         function action(evt, elem) {
           evt.preventDefault();
           evt.stopPropagation();
           evt.stopImmediatePropagation();
           alert('clicked in '+elem.innerText);
         }
</script>

功能动作（evt、elem）{
evt.preventDefault（）；
evt.stopPropagation（）；
evt.stopImmediatePropagation（）；
警报（'在'+elem.innerText'中单击）；
}