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

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

EricaLiBlog

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

阅读量993

点赞数

文章标签：前端事件冒泡关闭弹层

本文链接：https://blog.csdn.net/EricaLiBlog/article/details/78811099

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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(); 
  // 
  隐藏气泡  
 

   }); 
 