javascript - 如何避免来自对象下方的 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，但我想在用户点击复选框时允许他使用功能。

是否可以在不从下面的 div 调用 alert(1) 的情况下允许单击复选框并更改状态？

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();
    };