阻止 children 中的 DIV 触发事件

Question

我有以下 DOM 结构：

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

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

我希望始终将 div 作为 event.target。有什么方法可以阻止 children 触发事件吗？

注意：此问题不是 this question 的重复问题。正如该问题中所问的那样，恰恰相反。

Answer 1

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

currentTarget 属性是事件侦听器当前附加到的元素（在您的情况下是 div 和 onclick 属性）。

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

Is there any way to stop the children from firing events?

您可以检查 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>

Answer 2

children 将触发事件。但如果这些事件没有功能，它将转到 parent.

您可以停止向 parent objects 传播事件。但是在不同的浏览器中是不一样的。我编写了一个函数来尝试在所有浏览器中停止事件传播。您从捕获事件的 javascript 函数中调用它。另外，return false；在您捕获事件的函数中。

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

Answer 3

您可以在处理程序中传递带有 this 的容器 div，将 return 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)
}

演示 - Fiddle

阻止 children 中的 DIV 触发事件

Stop children of a DIV from firing events

javascript

dom-events