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

最新推荐文章于 2024-08-05 22:43:05 发布

EricaLiBlog

最新推荐文章于 2024-08-05 22:43:05 发布

阅读量904

点赞数

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

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

版权

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

   }); 
 

</script>

总结：点击气泡里的div时会触发document的监听事件，所以要用event.stopPropagation阻止父级的点击事件

EricaLiBlog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击页面空白处关闭气泡或弹层

1 点击div（更多）会出现一个气泡2再次点击div或页面上除了气泡之外的地方，气泡关闭如下图所示 :解决方法：divclass="no-solved"id="moreList"ng-class="{'active':moreSupply}"ng-click="moreSomething()">更多div>divclass="bubble
复制链接

扫一扫