點擊頁面隱藏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標簽的點擊事件也阻止事件冒泡，此時即可實現該功能。