点击页面隐藏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标签的点击事件也阻止事件冒泡，此时即可实现该功能。