问将单击事件添加到元素中，但不添加其角子元素。
EN

Stack Overflow用户

提问于 2016-06-28 20:11:51

回答 4查看 6.3K关注 0票数 3

我知道这可以用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中是否有实现这一点的方法？

javascript

angularjs

在线客服搭建方案

搭建集AI机器人、在线客服、智能外呼等多功能服务的客服系统，支持快速接入及自搭建客服系统，从而让顾客快速得到解答

回答 4

Stack Overflow用户

回答已采纳

发布于 2016-06-28 20:50:26

您可以比较target和currentTarget。前者是单击元素，后者是带有处理程序的元素。

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

票数 14

Stack Overflow用户

发布于 2016-06-28 20:21:38

我想你可以试试这样的方法：

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

参考资料：取消嵌套ng单击调用之间的事件传播的最佳方法是什么？

票数 0

Stack Overflow用户

发布于 2016-06-28 20: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>