javascript - 如何在 Angular 中有效地检测元素点击？

Question

这是我的指令链接函数

    function linkFunc(scope, element, attr){

        // Detect Element Click Logic
        scope.myCtrl.clickedElsewhere = {value: true};

        $document.on('click', function(){
            scope.myCtrl.clickedElsewhere.value = true;
            scope.$apply();
        });

        element.on('click', function(){
            event.stopPropagation();
            scope.myCtrl.clickedElsewhere.value = false;
            scope.$apply();
        });
        // End Detect Element Click Logic

    }

正如我们所见，我们使用了 $document.on() 和 scope.apply ，这意味着每次点击文档中的任何地方我们都会触发消化循环。如果我们有很多 $watch 触发器，这可能会导致网页变慢。虽然这个实现并不是非常有效，但我想不出其他方法来检测元素点击和关闭元素点击以扩展和收缩我的元素。

有人可以提供一些见解吗？

谢谢

Answer 1

在文档点击处理程序中调用 $apply() 之前检查 scope.myCtrl.clickedElsewhere.value 会更有效:

$document.on('click', function(){
   if(!scope.myCtrl.clickedElsewhere.value){
       scope.myCtrl.clickedElsewhere.value = true;
       scope.$apply();
   }
});

这将防止在其状态没有变化时进行不必要的摘要。

---

您也可以删除此点击监听器并在您点击元素时重新应用它:

function docHandler() {
  if (!scope.myCtrl.clickedElsewhere.value) {
    scope.myCtrl.clickedElsewhere.value = true;
    scope.$apply();
    $document.off('click');//remove event listener completely
  }
}

element.on('click', function() {
  event.stopPropagation();
  scope.myCtrl.clickedElsewhere.value = false;
  scope.$apply();
  $document.on('click', docHandler);// add document listener
});