javascript - button和body onclick事件同时触发

Question

angular.element('body').on('click', function () {
        //  $('.dropdown-menu').hide();
    console.log("clicked outside");
        });

$scope.showDropdown = function (e) {
      $scope.filterClick = !$scope.filterClick;
      e.stopPropagation();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.4/angular.min.js"></script>
<button id="btn-append-to-body" type="button" class="btn btn-primary" 
        ng-click="showDropdown()">
    <img src="assets/images/filterIcon.png">
    &nbsp&nbspFilter <span class="caret"></span>
</button>

  <li class="nav-item dropdown" ng-hide="filterClick">
      <div class="dropdown-menu">
        <div class="dropdown-item" ng-repeat="item in items">
          <div class="filter-class">
          </div>
        </div>
      </div>
  </li>

我有按钮点击和正文点击功能。但是如果我在 body 点击时在控制台中打印任何值，它工作正常。但同样的功能也适用于按钮点击。

我的需求是，

1) 如果我点击按钮，body onclick 不应触发。只有按钮 onclick 应该起作用。

2) 点击按钮，过滤器下拉菜单打开。当我再次单击同一个按钮时，它正在关闭。 (切换)

3) 但是当我在任何地方点击外面时，我想隐藏那个下拉菜单。但它不起作用。

我如何使用 angularjs 做到这一点？

Answer 1

在子方法中的 ng-click 上传递 $event，即按钮，然后在子方法中的事件上传递 stopPropagation()。 StopPropagation 停止事件冒泡。

HTML

    <div ng-click='parentClick()'>
        <button ng-click="childClick($event)">Click Me</button>
    </div>

JS

    var myApp = angular.module('myApp', []);

    function MyCtrl($scope) {
        $scope.parentClick = function() {
            alert('Parent clicked');
        };
        $scope.childClick = function(event) {
            event.stopPropagation();
            alert('Child clicked');
        };
    }