Question

我有一个特定的容器，当你点击它时，会执行一些javascrip。在这个容器中，我有一个按钮。

如果单击该容器上的任何位置，如何执行该操作，除按钮外执行代码？

<div id="container" onclick="alert('hello');">
    ...
    <input type="button" value="button">
    ...
</div>

我找到的唯一方法是将按钮放在容器外面并调整其绝对位置。但也许有更好的解决方案。

Answer 1

您应该了解这是事件传播的工作原理：当您单击某些内容时，只要它们具有单击事件侦听器，该事件就会进入父元素。你可以防止这种情况发生，使用

event.stopPropagation();

有关详细信息，请参阅：http://eloquentjavascript.net/14_event.html

Answer 2

只需使用event.stopPropagation()，就像这样：

<div style="width: 500px;height:500px;" onclick="alert(1);">
     ...
         <button type="button" value="button" onclick="event.stopPropagation();">
     ...
</div>

排除html部分被点击

2 个答案: