按钮和主体 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）如果我单击按钮，主体 onclick 不应触发。只有按钮 onclick 应该工作。2）单击按钮，过滤器下拉菜单正在打开。当我再次单击同一个按钮时，它正在关闭。（切换）3）但是当我点击外面的任何地方时，我想隐藏那个下拉菜单。但它不起作用。我如何使用 angularjs 做到这一点？

Answer 1

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

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

    event.stopPropagation();

});

Answer 2

在子 ie 按钮中通过 ng-click 传递 $event ，然后在 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');

        };

    }