在我的案例中,如何检测点击和操作元素

How to detect a click and manipulate element in my case

本文关键字:检测 元素 操作 案例 我的 何检测      更新时间:2023-09-26

当用户点击页面中的任何位置时,我正在尝试检测文档点击。我还想防止点击div来触发文档点击。

我有类似的东西

//Directive for page click
angular.module('myApp').directive('documentClick', ['$rootScope',
    function($rootScope) {
        return function(scope, element, attrs) {
            element.bind('click', function(e){
                $rootScope.$broadcast('pageClick');
            })
        }
}]);
controller JS
  //within a controller
  $scope.toggleDiv = function() {
      $scope.openDiv = !$scope.OpenDiv;
   }
  $scope.$on('pageClick', function($event) {
            $scope.openDiv = false;
  })
html 
  <body document-click>
      <div ng-controller = 'ctrl'>
          <div id='testDiv'>
               <div id='childDiv' ng-click="toggleDiv()">
                    toggle div here
               </div>
           </div>
      </div>
  </body>

我不想在单击"childDiv"时触发$scoep.openDiv = false。我只想在单击页面中的任何位置时触发$scope.openDiv = false

有没有一种有角度的方法可以做到这一点?

谢谢!

您可以传递事件e并检查target.id:

$rootScope.$broadcast('pageClick', e);

$scope.$on('pageClick', function($event, e) {
    if(e.target.id !== 'childDiv')
        $scope.openDiv = false;
})