如何避免对象下面的div事件？

Question

我有以下代码：

<div style="width:200px;height:100px;border:solid 1px" onclick="alert(1)">
  Title
  <br />
  Subtitle
  <div style="float:right">
  <input type="checkbox" />
  </div>
</div>

我想在用户单击div时将用户重定向到一个url（现在是警报），但是我想在用户单击复选框时允许该用户使用功能。

是否可以允许单击复选框并更改状态，而无需alert(1)从下面的div 调用？

Answer 1

您需要使用event.stopPropagation（）; 功能。此功能可防止当前事件在捕获和冒泡阶段中进一步传播。

<div style="width:200px;height:100px;border:solid 1px" onclick="alert(1)">
Title
<br />
Subtitle
<div style="float:right">
<input type="checkbox" onclick="onCheckBoxCicked(event)"/>
</div>

 function onCheckBoxCicked(event) {
        alert(2)
        event.stopPropagation();
    };