按钮和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>

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

我的需要是，

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

2) 单击按钮时，过滤器下拉菜单正在打开。当我再次单击相同的按钮时，它正在关闭。 （切换）

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

如何使用 angularjs 做到这一点？

Answer 1

通过 $event on ng-click in child 即按钮，然后在 child 方法中的事件上 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');
        };
    }

Answer 2

在子按钮元素回调函数中使用 event.stopPropagation()。

angular.element('#btn-append-to-body').on('click', function () {
    event.stopPropagation();
});