指令，当单击元素外部时触发事件

Question

为什么我需要这个功能？我正在建立一个应用程序，在这个应用程序，有3下拉菜单，5下拉列表（喜欢选择）。所有这些都是角指令。让我们假设所有这些指令都是不同的。所以我们有8个指令。它们都需要一个相同的功能：当点击元素的侧面时，需要隐藏下拉菜单。

我有两个解决方案，但都有问题：

解决方案A：

app.directive('clickAnywhereButHere', function($document){
  return {
    restrict: 'A',
    link: function(scope, elem, attr, ctrl) {
      elem.bind('click', function(e) {
        // this part keeps it from firing the click on the document.
        e.stopPropagation();
      });
      $document.bind('click', function() {
        // magic here.
        scope.$apply(attr.clickAnywhereButHere);
      })
    }
  }
})

app.directive('clickAnywhereButHere', ['$document', function ($document) {
    directiveDefinitionObject = {
        link: {
            pre: function (scope, element, attrs, controller) { },
            post: function (scope, element, attrs, controller) {
                onClick = function (event) {
                    var isChild = element.has(event.target).length > 0;
                    var isSelf = element[0] == event.target;
                    var isInside = isChild || isSelf;
                    if (!isInside) {
                        scope.$apply(attrs.clickAnywhereButHere)
                    }
                }
                $document.click(onClick)
            }
        }
    }
    return directiveDefinitionObject
}]);

解决方案B在我的应用程序中工作，我现在正在使用。但问题是它会导致性能问题。太多的点击事件处理每一个单一的点击在应用程序的任何地方。在我当前的情况下，有8个click事件与文档绑定，所以每个click执行8个函数。这导致我的应用程序非常慢，尤其是在IE8中。

那么有没有更好的解决办法呢？谢谢

Answer 1

我不会使用event.stoppropagation()，因为它会引起解决方案A中的问题。如果可能的话，我还会使用模糊和聚焦事件。当您的下拉列表附加到输入时，您可以在输入失去焦点时关闭它。

但是，在文档上处理click事件也不是很糟糕，所以如果您想避免多次处理同一个click事件，只需在不再需要它时将它与文档解除绑定即可。除了在下拉菜单外单击时要计算的表达式之外，指令还需要知道它是否处于活动状态：

app.directive('clickAnywhereButHere', ['$document', function ($document) {
    return {
        link: function postLink(scope, element, attrs) {
            var onClick = function (event) {
                var isChild = $(element).has(event.target).length > 0;
                var isSelf = element[0] == event.target;
                var isInside = isChild || isSelf;
                if (!isInside) {
                    scope.$apply(attrs.clickAnywhereButHere)
                }
            }
            scope.$watch(attrs.isActive, function(newValue, oldValue) {
                if (newValue !== oldValue && newValue == true) {
                    $document.bind('click', onClick);
                }
                else if (newValue !== oldValue && newValue == false) {
                    $document.unbind('click', onClick);
                }
            });
        }
    };
}]);

在使用指令时，只需提供如下所示的另一个表达式：

<your-dropdown click-anywhere-but-here="close()" is-active="isDropdownOpen()"></your-dropdown>