Javascript 将单击事件添加到元素中，但不将其子元素添加到元素中

我知道这可以通过jQuery实现，如下所示：

但在angular中，

这个

关键字在我使用以下内容时不会绑定到元素：

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

事件将触发，但我需要防止在单击元素的子元素时触发该事件

---

我不想基于类或属性对

event.target

进行硬编码检查，因为它以后可能会更改。在HTML标记中，或者在JavaScript中，没有对元素的类或属性进行硬编码（类似于jQuery中绑定

this

关键字的技术），是否可以实现这一点

<div ng-dblclick="ctrl.doubleClickHandler($event) $event.stopPropagation()">

参考：

我在您的示例中使用jquery通过create指令更新答案

var-app=angular.module（“app”，[]）；
应用控制器（“控制器”，功能（$scope）{
var ctrl=this；
ctrl.doubleClickHandler=函数（）{
警报（“家长单击”）
}
});
应用程序指令（“directiveName”，函数（）{
返回{
限制：“A”，
范围：{
单击“&”
},
链接：功能（范围、元素、属性）{
元素上（'click'，函数（e）{
如果（例如，目标！==此）{
返回；
}否则{
作用域。单击（）
}
});
}
}
})

.foobar span{
背景：红色；
}

父母亲
小孩

如果您使用的是

jquery

试试这个

<div class="foobar"> .foobar (alert)
      <span>child (no alert)</span>
</div>

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

    $scope.myFunc(e);
});


$scope.myFunc = function(e) {
     $scope.clicked = "Parent Cicked";
    $scope.$apply();
};

---

您可以比较

目标

和

当前目标

。前者是单击的元素，后者是带有处理程序的元素

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

---

为什么在角度控制器中使用私有函数？@Maher我有

this.doubleClickHandler=doubleClickHandler在我的控制器中，但这不是我想的重点？@Maher我被教导通过这个.ctrlFunc（）而不是$scope.cntrlFunc（）在控制器中保持任何不需要绑定到$scope private的控制器逻辑。它仍然是公共的，因为您可以通过分配给控制器的名称调用控制器中的函数。我知道，我们可以在控制器中定义作用域，但在本示例中，我们将函数定义为私有函数，因此无法获得控制台。您是否使用
jquery
和
angular
？这不起作用。我认为这是因为孩子们有完全相同的事件监听器，只是用不同的
事件.target启动。无论如何，事件都会触发。您好，您误解了我的问题，事件正在触发，但我只需要使用
ng dbclick
对元素进行触发，而不需要对其子元素进行触发。感谢您提供的新答案，但这是一个过激的回答，我接受的答案更简单。感谢您提供的答案，但我不希望检查属性或类（请参见问题说明）。否则，它会破坏在该特定元素上添加
ng单击
，因为我可以将其添加到
body
上，并获得相同的效果。谢谢。这正是我要寻找的。而且，很有帮助。很好：），简单，是的，这实际上不是一个角度特定的答案。在Angular中，如果您还希望处理来自内部非按钮元素（如
）的事件，则可以检查
event.target
是否具有
[ng click]
等属性。
<div class="foobar"> .foobar (alert)
      <span>child (no alert)</span>
</div>

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

    $scope.myFunc(e);
});


$scope.myFunc = function(e) {
     $scope.clicked = "Parent Cicked";
    $scope.$apply();
};

<div class="foobar" data-parent="true" ng-click="myFunc($event)"> .foobar (alert)
      <span>child (no alert)</span>
</div>

// add data attribute as data-parent="true"

$scope.myFunc = function(e) {
    if (! e.target.hasAttribute('data-parent'))
        return;

    $scope.clicked = "Parent Cicked";
};

//if clicked element has `data-parent` property do the things.

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