如何避免来自对象下方 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();
    };

Answer 2

您需要在 checkbox 单击事件处理程序上使用 stopPropagation() method，因此单击复选框不会触发其单击parents 分区：

HTML:

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

JS:

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

function avoidAlert(event) {
  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="avoidAlert(event)" />
  </div>
</div>

MDN Ref for stopPropagation() method:

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Answer 3

您可以在复选框的额外事件处理程序中尝试 event.stopPropagation()，或者如果点击的目标是复选框，则只需检查 div 的事件处理程序：

var theDiv = document.querySelector('.outer'),
    theCheckbox = document.querySelector('input');

theDiv.addEventListener('click', divClicked);
    
function divClicked(e) {
  if (e.target !== theCheckbox) {
    alert('You clicked the div!');
  }
}

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

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

How to avoid event from div below object?

html

javascript

event-bubbling

dom-events