Question

我有以下DOM结构：

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

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

我希望始终将div作为event.target。有没有办法阻止孩子们开除事件？

注意：此问题与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);
}

示例说明：

＆＃13;

div { border: 1px solid; height: 200px; width: 200px; }

＆＃13;

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

＆＃13;

有没有办法阻止孩子开火？

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

在下面的代码段中，单击子元素外部时if语句将为true，直接单击子元素时它将为false：

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

基本示例：

＆＃13;

div { border: 1px solid; height: 200px; width: 200px; }

＆＃13;

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

＆＃13;

Answer 2

您可以在处理程序中传递带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)
}

演示 - Fiddle

Answer 3

孩子们将解雇这些事件。但如果这些事件没有任何功能，它将转到父母身上。

您可以停止事件传播到父对象。但它在不同的浏览器中有所不同。我编写了一个函数来尝试在所有浏览器中停止事件传播。你可以从捕获事件的javascript函数中调用它。另外，返回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;
}

阻止DIV的孩子发射事件

3 个答案: