点击页面隐藏div处理

需求:

  点击按钮,显示一个操作框,点击页面,隐藏操作框

 

 

实现步骤:

  1.对页面根元素绑定click事件,点击页面时,隐藏操作框;

<div className={'pageStyle'}
      style={{
           backgroundColor:'#eff3f6',
           padding:'0 1rem'
      }}
      onClick={(e)=>{
          let editBoxList =   document.getElementsByClassName('editTagBox');
          console.log(e.currentTarget)
              for(let i = 0; i <editBoxList.length;i++ ){
                  editBoxList[i].style.display = 'none'
              }
          }}
      >
</div>

  2.对操作框绑定click事件,事件回调中阻止事件冒泡。

<div
    onClick={(e)=>{
         if (e.stopPropagation) {
              e.stopPropagation(); 
         }else {
                e.cancelBubble = true; 
          }
    }}
></div>

 

  此时点击页面,只会执行根元素的点击隐藏事件,点击操作框,只会执行操作框绑定的click事件,但是出现本来正常的点击tag按钮弹出操作框的按钮变为点击无效,经检查,发现tag按钮执行了两个click事件,先执行了自身的点击显示操作框事件,后执行了页面根元素的隐藏操作框事件(因为tag按钮是根元素的后代元素),故需要给tag标签的点击事件也阻止事件冒泡,此时即可实现该功能。

 

posted @ 2019-03-19 21:40  如昔  阅读(1483)  评论(0)    收藏  举报