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

我有以下代码：

<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中的

警报（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>

---

您需要在

复选框上使用单击事件处理程序，这样复选框的单击不会触发其父div的单击：

HTML:

<input type="checkbox" onclick="avoidAlert(event)" />

function avoidAlert(event) {
  event.stopPropagation();
}


函数回避（事件）{
event.stopPropagation（）；
}

标题

副标题
您可以在复选框上的额外事件处理程序中尝试
event.stopPropagation（）
，或者如果单击的目标是复选框，则只需在div的事件处理程序中进行检查：


var theDiv=document.querySelector（'.outer'），
checkbox=document.querySelector（'input'）；
iv.addEventListener（'click'，divClicked）；
功能分区（e）{
如果（例如，目标！==检查框）{
警报（'您单击了div！'）；
}
}

标题


字幕
谢谢，它是否有副作用或安全？这是一种标准方法，可用于在单击父和子div的侦听器时阻止事件冒泡。您还可以检查（event.srceelement==此）警报（1）
function avoidAlert(event) {
  event.stopPropagation();
}