将点击事件添加到元素，但不将其子元素添加到角
[英]Add click event to element, but not its children in angular
问题描述
我知道可以使用jQuery来完成此操作，如下所示： 如何仅在父DIV而非孩子上触发click事件？
$('.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的检查进行硬编码，因为以后可能会更改。 无论如何，是否可以在HTML标签中或在JavaScript中实现此功能而无需对元素的类或属性进行硬编码（类似于在jQuery中绑定this关键字的技术）？
4 个解决方案
解决方案1
6 已采纳 2016-06-29 04:50:26
您可以比较target和currentTarget 。 前者是clicked元素，后者是带有处理程序的元素。
function doubleClickHandler(event) {
if (event.target !== event.currentTarget) return;
// do something
}
解决方案2
0 2016-06-29 04:21:38
我认为您可以尝试这样的事情：
<div ng-dblclick="ctrl.doubleClickHandler($event) $event.stopPropagation()">
解决方案3
0 2016-06-29 04:26:17
我通过在您的示例中使用jquery的create指令来更新答案。
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>
解决方案4
0 2016-06-29 04:47:54
如果您使用的是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();
};
当然，这不会带来良好的编程技能。 因此，您可以尝试以下带有angular和JS示例
<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.
将 Click 事件监听器添加到 Angular 中动态插入的元素
[英]Add Click event listener to dynamically inserted element in Angular
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.