点击无处不在但在这里事件 [英] Click everywhere but here event

问题描述

想知道我将如何实现一个点击无处不在，但这个元素的事件。

Was wondering how I would implement a 'Click everywhere but on this element' event.

我有东西，你可以比较文件的列表中的文件资源管理器。您可以选择某些元素，但如果你点击它需要取消选择所有元素外控制器

I have something that you can compare to a list of files in a file explorer. You can select certain elements but if you click outside the element controller it needs to deselect everything.

新增截图，使之更加清晰。因此，我想要做的是，如果我点击任何地方，但在语言元素应该触发事件。

Added a screenshot to make it more clear. So what I want to do is that if I click anywhere but on the language elements it should fire an event.

更新

要澄清我不是问我该怎么用jQuery做到这一点。

To clarify I am not asking how I can do this with jQuery.

推荐答案

的 *另外：标记社区维基（对我来说没有点），因为错误的

1. n次的调用N个使用的指令。这可能是不希望在同一范围内的用途相匹配的前pressions。

1. N calls for N uses of the directive. This probably isn't desirable for uses within the same scope with matching expressions.

什么也没有拆除事件处理程序!!!!坏！坏！坏！

NOTHING WAS TEARING DOWN THE EVENT HANDLERS!!!! BAD! BAD! BAD!

所以，我更新这个答案。希望这没有引起任何人都太麻烦了。

So, I'm updating this answer. Hopefully it didn't cause anyone too much trouble.

下面是这些问题的固定新plunker ......也有可能其他的东西，个人应用开发者会碰到。这仅仅是如何处理这个问题的一个例子。

Here's a new plunker with those issues fixed ... there are likely other things that individual application developers will run into. This is just an example of how to handle this problem.

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

原来的答复（与修复事件处理的拆解）

您已经接近你已经找到了一个答案，但我的 放在一起普拉克 为你向你展示它失踪了。

Original answer (with fixes for teardown of event handlers)

You were close with the one answer you've found, but I've put together a plunk for you to show you what it was missing.

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>

这篇关于点击无处不在但在这里事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！