阻止 DIV 的子级触发事件

Stop children of a DIV from firing events

本文关键字：事件 DIV 阻止      更新时间：2023-09-26

>我有以下DOM结构： 

<div onclick="function">
<element1 />
<element2 />
<element3 />
....
</div>

当我单击任何一个元素时，event.target就是该元素。

我想总是得到div 作为event.target.有没有办法阻止孩子们开火事件？

注意：这个问题不是这个问题的重复。因为这个问题中提出的完全是另一种方式。

如果始终需要事件侦听器附加到的元素，则访问事件对象上的 currentTarget 属性，event.currentTarget ，而不是 event.target 。

currentTarget 属性是事件侦听器当前附加到的元素(在您的情况下，该元素是具有 onclick 属性的div(。

<div onclick="clickHandler(event)"></div>

function clickHandler(event) {
  console.log('Event is attached to: ', event.currentTarget);
  console.log('The element clicked was: ', event.target);
}

此外，如果将 this 关键字作为参数传递，它也会引用该元素。您可以使用 .call() 方法在函数回调中设置 this 的值。

将onclick属性更新为以下内容：

<div onclick="clickHandler.call(this, event)"></div>

然后，函数的 this 关键字将引用该div元素，event 将作为第一个参数传递：

function clickHandler(event) {
  console.log('Event is attached to: ', event.currentTarget);
  console.log('The element clicked was: ', event.target);
  console.log('"this" refers to: ', this);
}

演示这一点的示例：

div { border: 1px solid; height: 200px; width: 200px; }
<script>
function clickHandler(event) {
  console.log('Event is attached to: ', event.currentTarget);
  console.log('The element clicked was: ', event.target);
  console.log('"this" refers to: ', this);
}
</script>
<div onclick="clickHandler.call(this, event)">
  <span>'event.currentTarget' is the div</span>
  <span>'this' is also the div</span>
</div>

有没有办法阻止孩子们开火事件？

您可以检查event.target是否event.currentTarget。

在下面的代码片段中，当单击子元素外部时，if语句将为真，当直接单击子元素时，该语句将为假：

function clickHandler(event) {
  if (event.target === event.currentTarget) {
    // ...
  }
}

基本示例：

div { border: 1px solid; height: 200px; width: 200px; }
<script>
function clickHandler(event) {
  console.log(event.target === event.currentTarget);
}
</script>
<div onclick="clickHandler(event)">
  <span>Click outside of a span</span>
  <span>Another span</span>
</div>

您可以在处理程序中传递带有this的容器div，将返回f：

<div id="f" onclick="f(this)">f
  <div id="1">1</div>
  <div id="2">2</div>
  <div id="3">3</div>
</div>
function f(el) {
   alert(el.id)
}

演示 - 小提琴

孩子们将触发事件。但是，如果没有这些事件的函数，它将转到父级。

您可以停止事件传播到父对象。但在不同的浏览器中是不同的。我编写了一个函数来尝试停止所有浏览器中的事件传播。你可以从捕获事件的 javascript 函数调用它。此外，返回假;在捕获事件的函数中。

function cancelEvent(e)
{
  e = e ? e : window.event;
  if(e.stopPropagation)
    e.stopPropagation();
  if(e.preventDefault)
    e.preventDefault();
  e.cancelBubble = true;
  e.cancel = true;
  e.returnValue = false;
  return false;
}
相关文章：