把click事件添加到元素中,而不是它在angular中的子元素

Add click event to element, but not its children in angular

本文关键字:元素 angular 事件 click 添加      更新时间:2023-09-26

我知道这可以用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关键字的技术)?

您可以比较targetcurrentTarget。前者是被单击的元素,后者是带有处理程序的元素。

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();
};

演示

这肯定不会导致好的编程技能。因此,您可以尝试下面的示例angularJS

<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>