点击页面空白处关闭气泡或弹层

最新推荐文章于 2023-07-27 14:18:55 发布

原创最新推荐文章于 2023-07-27 14:18:55 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #事件冒泡 #关闭弹层

本文介绍了一种使用AngularJS实现的气泡菜单交互效果，包括如何通过点击“更多”按钮展示和隐藏气泡菜单，并确保点击菜单项时不会触发菜单的关闭。此外，还详细解释了如何利用事件冒泡原理来实现这些功能。

1 点击div（更多）会出现一个气泡

2再次点击div或页面上除了气泡之外的地方，气泡关闭如下图所示 :

解决方法：

<html>

<div
class="no-solved"
id="moreList"
ng-class="{'active':moreSupply}"
ng-click="moreSomething()">更多</div>
<div
class="bubble"
ng-show="moreSupply"
id="detailList">
<div
class="tag"
ng-model="bubbleList">
<div
class="tag-title"
ng-click="doMore()">指派工程师</div>
<div
class="tag-title"
ng-click="doMore()">驳回</div>
<div
class="tag-title"
ng-click="doMore()">申请挂起</div>
<em></em>
</div>
</div>

</html>

//底部气泡框显示和隐藏
//点击更多显示与隐藏气泡
var
oMoreList
= 
document.getElementById("moreList");
oMoreList.addEventListener("click",function(event){
$scope.moreSupply=!$scope.moreSupply;
event=event||window.event;
event.stopPropagation();//阻止事件冒泡,防止隐藏
});
//点击气泡列表不隐藏
var
oDetailList 
= document.getElementById("detailList");
oDetailList.addEventListener("click",function(event){
$scope.moreSupply=true;
event=event||window.event;
event.stopPropagation();//阻止事件冒泡
});
//点击页面空白处隐藏气泡
document.addEventListener("click",function(){
$scope.moreSupply=false;
$scope.$apply();//隐藏气泡
});