javascript - 将点击事件添加到元素，但不添加 Angular 子元素

Question

我知道这可以用 jQuery 来完成，如下所示:How to have click event ONLY fire on parent DIV, not children?

$('.foobar').on('click', function(e) {
  if (e.target !== this)
    return;

  alert( 'clicked the foobar' );
});

但是 Angular 来看， this当我使用以下内容时，关键字未绑定(bind)到元素:

<div ng-dblclick="ctrl.doubleClickHandler($event)">
    parent, event should fire here.
    <div>child, event should not fire here.</div>
</div>

在我的 Controller 中:

this.doubleClickHandler = doubleClickHandler;
function doubleClickHandler(event) {
  console.log(this); // this binds to controller
  console.log(event);
}

事件 火灾 ，但是当我单击元素的子元素时，我需要防止它触发。

我不想对 event.target 的支票进行硬编码。基于类或属性，因为它可能会在以后更改。无论如何，是否可以在 HTML 标记中或在 JavaScript 中实现这一点，而无需对元素的类或属性进行硬编码(类似于在 jQuery 中绑定(bind) this 关键字的技术)？

Answer 1

你可以比较target和 currentTarget .前者是被点击的元素，后者是带有处理程序的元素。

function doubleClickHandler(event) {
  if (event.target !== event.currentTarget) return;
  // do something
}