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">
  Filter <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 做到这一点?
最佳答案
在子方法中的 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');
};
}
关于javascript - button和body onclick事件同时触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56179872/