Javascript 处理两个或多个相同指令的点击

我正在尝试为AngularJS指令创建单击离开功能（即，当用户不单击某个元素时，它会隐藏）

我正在向$（body）添加一个检测单击的事件

然后我检查我的指令或它的任何子指令是否已被单击。如果他们没有，它会隐藏一个div

当我有一个指令时，这可以很好地工作，但是当我添加第二个相同类型的指令时，就是第二个指令处理$（body）.click（）事件。第一个看不进去

我的代码如下（我已经删除了大部分代码）：

我觉得如果我能找到合适的人，我就能处理剩下的事情

---

任何帮助都将不胜感激。

我建议通过添加单击事件名称，如

click.panelClick1

，将该指令事件设置为特定的

单击

&它将特定于每个元素，使用属性传递slug参数，但每次设置指令时都需要更改该值

或

另一个很好的方法是通过执行类似于

Math.Random（）

函数的操作来定义slug参数，以确保click事件的唯一性，该函数将返回随机值

Html

<ma-dropdown-panel slug="1"></ma-dropdown-panel>

---

我找到了一个办法。恩齐的评论提供了线索：

其次，您正在注册的点击事件需要在某个时间点删除，否则将永远存在并始终得到评估

关键是：

显示div时注册click事件

隐藏div时删除click事件

因为单击会隐藏div：

• 一次不可能看到多个div
• 这意味着一次只会注册一个相关的点击事件
• 这意味着不同的点击事件/指令之间没有冲突

---

希望这有道理。

Ooh。我不知道事件名称的名称间隔。下次当我在电脑前的时候，我会试试的，谢谢@greggannicott让我知道是否有任何问题。你能运行我的方法吗？不幸的是，它不起作用。它似乎没有像我希望的那样在指令之间区分事件。也许再坚持一点，它可能会起作用（我可能做错了），但我找到了一个不同的解决方案。谢谢你的建议！感谢。点击离开功能需要注意多个事项。首先在主体上添加

单击

，意味着无论您在何处单击，它都将被触发。这是因为事件从主体到元素，然后返回主体。其次，您正在注册的

单击
事件需要在某个时候删除，否则将永远存在并始终得到评估。@Enzey谢谢。除了在主体中添加单击之外，您还知道其他处理方法吗？不，这是您需要的方法，但您需要额外的处理来忽略某些元素。如果您正在注册一次事件，您可以查看使用如果这是您希望继续运行的事件，那么您仍然可以使用它每次重新注册该事件，或者将其作为示例供您自己使用。
<ma-dropdown-panel slug="1"></ma-dropdown-panel>

angular.module('ma.directives')
    .directive('maDropdownPanel', function() {

        var directiveId = null;

        return {
            restrict: "E",
            transclude: true,
            templateUrl: "maDropdownPanel.html",
            scope: {},
            link: function(scope, element, attributes) {
                $('body').on('click.panelClick' + attributes.slug, scope.handleClickAway);

                // Get an ID unique to this particular directive.
                directiveId = "ma-dropdown-panel" + scope.$id;
            },
            controller: function($scope) {
                $scope.handleClickAway = function(event) {
                    // The following shows which directive took it. Out of two, it's always the second (ie. the last to register the event).
                    console.log(directiveId);
                }
            }
        }
    });