37

想知道我将如何实现“在此元素上以外的所有地方单击”事件。

我有一些东西可以与文件资源管理器中的文件列表进行比较。您可以选择某些元素，但如果您在元素控制器外部单击，则需要取消选择所有内容。

在此处输入图像描述

添加了屏幕截图以使其更清晰。所以我想要做的是，如果我点击除语言元素之外的任何地方，它应该触发一个事件。

更新

为了澄清，我不是在问如何使用 jQuery 来做到这一点。

4

8 回答 8

68

编辑：这个老旧的答案有几个问题。

*另外：标记社区 Wiki（对我来说没有积分）因为错误

  1. N 次调用该指令的 N 次使用。对于具有匹配表达式的相同范围内的使用，这可能是不可取的。

  2. 没有什么可以破坏事件处理程序！！！！坏的！坏的！坏的！

所以，我正在更新这个答案。希望它不会给任何人带来太多麻烦。

更新的答案

这是一个修复了这些问题的新工具……个别应用程序开发人员可能会遇到其他问题。这只是如何处理此问题的示例。

app.factory('clickAnywhereButHereService', function($document){
  var tracker = [];
  
  return function($scope, expr) {
    var i, t, len;
    for(i = 0, len = tracker.length; i < len; i++) {
      t = tracker[i];
      if(t.expr === expr && t.scope === $scope) {
        return t;    
      }
    }
    var handler = function() {
      $scope.$apply(expr);
    };
    
    $document.on('click', handler);
    
    // IMPORTANT! Tear down this event handler when the scope is destroyed.
    $scope.$on('$destroy', function(){
      $document.off('click', handler);
    });
    
    t = { scope: $scope, expr: expr };
    tracker.push(t);
    return t;
  };
});

app.directive('clickAnywhereButHere', function($document, clickAnywhereButHereService){
  return {
    restrict: 'A',
    link: function(scope, elem, attr, ctrl) {
      var handler = function(e) {
        e.stopPropagation();
      };
      elem.on('click', handler);
      
      scope.$on('$destroy', function(){
        elem.off('click', handler);
      });
      
      clickAnywhereButHereService(scope, attr.clickAnywhereButHere);
    }
  };
});

原始答案（修复了事件处理程序的拆卸）

你很接近你找到的一个答案，但我已经为你整理了一个 plunk来告诉你它缺少什么。

app.directive('clickAnywhereButHere', function($document){
  return {
    restrict: 'A',
    link: function(scope, elem, attr, ctrl) {
      var elemClickHandler = function(e) {
        e.stopPropagation();
      };
      
      var docClickHandler = function() {
        scope.$apply(attr.clickAnywhereButHere);
      };
      
      elem.on('click', elemClickHandler);
      $document.on('click', docClickHandler);
      
      // teardown the event handlers when the scope is destroyed.
      scope.$on('$destroy', function() {
        elem.off('click', elemClickHandler);
        $document.off('click', docClickHandler);
      });
    }
  }
})

HTML

<a click-anywhere-but-here="clickedSomewhereElse()" 
  ng-click="clickedHere()">Don't Click Me!</a>
于 2012-10-17T13:58:48.700 回答
28

当前接受的答案的问题是，如果您多次使用该指令，则附加该指令的每个 DOM 元素都将防止冒泡（因此，如果您将它放在两个元素上，并且单击其中一个，则两者的回调将是被封锁）。

编辑 - 避免使用 jQuery，清理- 在您的范围内定义一个函数，并将其直接传递给该指令（不带括号），事件将在调用时传递给它。

app.directive('clickAnywhereButHere', function($document, $parse) {
    return {
        restrict: 'A',
        scope: {
            callback : '=clickAnywhereButHere'
        },
        link: function(scope, element, attr, ctrl) {
            var handler = function(event) {
                if (!element[0].contains(event.target)) {
                    scope.callback(event);
                 }
            };

            $document.on('click', handler);
            scope.$on('$destroy', function() {
                $document.off('click', handler);
            });
        }
    }
});

HTML 中的用法

<a click-anywhere-but-here="myFunction"></a>

在控制器中的使用

 $scope.myFunction = function (event) { ... }

-

请注意，您可能需要scope.callback(event)用scope.$apply()

于 2013-05-24T19:14:26.487 回答
7

如果你有很多元素需要这个指令，这里是另一个性能优化的解决方案。（例如一个有 100 多行的列表，每行都有这个指令）

这将始终只包含一个 $document 监听器

angular.module('app').directive('clickElsewhere', ['$document', function ($document) {
return {
  link: function postLink(scope, element, attr) {

    var elsewhere = true;

    element.on('click', function(e) {
      elsewhere = false;
      $document.off('click', clickElsewhere);
      $document.on('click', clickElsewhere);
    });

    var clickElsewhere = function() {
      if (elsewhere) {
        scope.$apply(attr.clickElsewhere);
        $document.off('click', clickElsewhere);
      }
      elsewhere = true;
    };

  }
};
}]);

Max Bates 的解决方案的问题是所有指令都在为 $document.on('click', function(...)); 添加一个监听器。导致性能问题的事件。

Max Bates 已经说明了接受答案的问题。

于 2014-06-18T08:46:04.680 回答
3

在这篇博文上找到了答案。

指示：

app.directive('documentClick', function ($document, $parse) {

  var linkFunction = function ($scope, $element, $attributes) {

    var scopeExpression = $attributes.documentClick;
    var invoker = $parse(scopeExpression);

    $document.on('click', function (event) {

      $scope.$apply(function () {
        invoker($scope, { $event: event });
      });

    });

  };

  return linkFunction;

});

控制器：

app.controller('PageCtrl', function ($scope) {

  $scope.click = function (e) {
    if (!$(e.target).is('.language')) {
      //do stuff
    }
  };

});

看法：

<body ng-controller='PageCtrl' document-click='click($event)'></body>
于 2012-10-17T10:17:18.290 回答
2

这是一个基于 Max 解决方案的变体，但在标准角度事件指令方面更自然：

app.directive('clickOut', function($document) {
    return {
        restrict: 'A',
        scope: {
            clickOut: '&'
        },
        link: function (scope, element) {
            var handler = function(event) {
                if (!element[0].contains(event.target)) {
                    scope.$apply(function () {
                        scope.clickOut({ $event : event }); 
                    });
                }
            };

            $document.on('click', handler);
            scope.$on('$destroy', function() {
                $document.off('click', handler);
            });
        }
    };
});

用法

<div click-out="myFunction()"></div>

传递点击事件

<div click-out="myFunction($event)"></div>
于 2015-04-08T07:07:42.033 回答
1

最简单的方法是检查元素的 scope.$id 和 clickScope.$id（点击事件目标范围.$id）。

link: function(scope, element, attrs) { 
    //close element when mouse click outside
    var documentClickHandler = function(event) {
        var clickScope = angular.element(event.target).scope();
        if (clickScope.$id != scope.$id) {
            //clickScope.$parent is for clicking on the directive children scope
            if(clickScope.$parent === null || 
               clickScope.$parent.$id != scope.$id){
               //Click everywhere but on this element
               //Do anything you want here, like close your element;
            }
        }

    };

    $document.on('click', documentClickHandler);

    scope.$on('$destroy', function() {
        $document.off('click', documentClickHandler);
    });
}
于 2016-08-22T10:26:39.647 回答
0

此解决方案的好处：

  1. 您只需要一个绑定到$(document). 其他事件的触发将取决于$emit范围事件。
  2. 您可以同时使用表达式click-elsewhere="show=false"和click-elsewhere="fn()"，感谢$parse。

代码：

// broadcast click event within AppCtrl
app.controller('AppCtrl', function($rootScope) {
  $(document).on('click', function(e) {
    // use $emit so the event stays inside $rootScope
    $rootScope.$emit('click', {target: e.target});
  };
};

app.directive('clickElsewhere', function($rootScope) {
  return {
    restrict: 'A',
    compile: function($element, attr) {
      // store fn in compile so it only execute once
      var fn = $parse(attr['clickElsewhere']); 

      return function(scope, element) {
        var offEvent = $rootScope.$on('click', function(event, target) {
          if ( (element.find($(target)).length) || element.is($(target)) ) return;

          scope.$apply(function() {
            fn(scope, {$event: event});
          });
        });

        scope.$on('$destroy', offEvent);
      };
    }
  };

HTML 中的用法：

  1. click-elsewhere="fn()"
  2. click-elsewhere="show=false"
于 2014-11-10T02:51:26.590 回答
-1

这可能有点脱离上下文，但您可以对所有选定项目进行分类（例如“选定”），当用户单击“请勿点击此处”元素时，您可以对当前分类为“选定”的所有项目进行解密，并且对特定元素进行分类...

于 2012-10-17T09:41:17.090 回答