将单击事件添加到元素中，但不添加其角子元素。
将单击事件添加到元素中，但不添加其角子元素。
提问于 2016-06-29 04:11:51
我知道这可以用jQuery来完成，如下所示：如何使单击事件只触发父级DIV，而不是子级？
$('.foobar').on('click', function(e) {
if (e.target !== this)
return;
alert( 'clicked the foobar' );
});但是，在角中，当我使用以下内容时，this关键字不会绑定到元素：
<div ng-dblclick="ctrl.doubleClickHandler($event)">
parent, event should fire here.
<div>child, event should not fire here.</div>
</div>在我的控制器里：
this.doubleClickHandler = doubleClickHandler;
function doubleClickHandler(event) {
console.log(this); // this binds to controller
console.log(event);
}事件触发，但是当我单击元素的子元素时，我需要防止它触发。
我不想根据类或属性对event.target进行硬编码，因为它以后可能会改变。在没有硬编码元素的类或属性(类似于在JavaScript中绑定this关键字的技术)的情况下，HTML中或者在jQuery中是否有实现这一点的方法？
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-06-29 04:50:26
您可以比较target和currentTarget。前者是单击元素，后者是带有处理程序的元素。
function doubleClickHandler(event) {
if (event.target !== event.currentTarget) return;
// do something
}Stack Overflow用户
发布于 2016-06-29 04:21:38
我想你可以试试这样的方法：
<div ng-dblclick="ctrl.doubleClickHandler($event) $event.stopPropagation()">Stack Overflow用户
发布于 2016-06-29 04:26:17
我通过在示例中使用jquery创建指令来更新答案。
var app = angular.module("app", []);
app.controller("controller", function ($scope) {
var ctrl = this;
ctrl.doubleClickHandler = function () {
alert("parent clicked")
}
});
app.directive("directiveName", function () {
return {
restrict: "A",
scope: {
click: "&"
},
link: function (scope, element, attr) {
element.on('click', function (e) {
if (e.target !== this) {
return;
} else {
scope.click()
}
});
}
}
}).foobar span {
background: red;
}<!DOCTYPE html>
<html ng-app="app" ng-controller="controller as ctrl">
<head>
<title></title>
</head>
<body>
<div click="ctrl.doubleClickHandler()" directive-name class="foobar">
parent
<span>
child
</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38090234
复制相关文章
相似问题
腾讯云开发者
