把click事件添加到元素中,而不是它在angular中的子元素
Add click event to element, but not its children in angular
我知道这可以用jQuery完成,如下所示:如何在父div上只有点击事件,而不是孩子?
$('.foobar').on('click', function(e) {
if (e.target !== this)
return;
alert( 'clicked the foobar' );
});
但在angular中,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
关键字的技术)?
您可以比较target
和currentTarget
。前者是被单击的元素,后者是带有处理程序的元素。
function doubleClickHandler(event) {
if (event.target !== event.currentTarget) return;
// do something
}
我想你可以试试这样做:
<div ng-dblclick="ctrl.doubleClickHandler($event) $event.stopPropagation()">
reference:取消嵌套ng-click调用之间事件传播的最佳方法是什么?
如果您使用的是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.
演示我在你的示例中使用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>
相关文章:
- DOM元素和angular元素之间的主要区别是什么
- 如何在html angular中显示嵌套的json元素
- Angular渲染元素,但不渲染;t显示数据
- Angular没有根据模型更新我的选择元素
- Angular Datetimepicker:指令'的模板;uib时间选择器'必须只有一个根元素
- 将鼠标悬停在Angular JS中的一个元素上,并将Class添加到另一个元素中
- 如何在Angular JS中滚动显示元素
- 他们是如何使用angular/jqLite find()方法按属性名称和值选择元素的?ng conf 2015
- 使用ngRepeat中的Angular动态更改元素颜色
- spin.js/angular spinner:如何将spin定位到DOM元素中(包括plunker演示)
- 如何在Angular中清除选择元素中的过滤器
- 使用模板后,使用Angular获取元素属性值
- 只有当Angular从资源对象检索数据时,才选择选项元素
- Angular 指令似乎没有使用元素传入的选项执行
- angular元素在通过ng类添加类时不起作用
- Angular js将只显示ng repeat中的第一个元素
- 无法从模态元素 Angular JS 获取$file
- 如何防止添加dragget元素(angular、dragular)
- ng-repeat中的ng-repeat会创建空的td元素——Angular
- 如何在运行时添加SVG元素——Angular