[JavaScript知识库]js点击某个DOM元素之外的方法

<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .self-region {
    margin: 100px 0 0 100px;
    width: 100px;
    height: 100px;
    border: 1px solid red;
    box-sizing: border-box;
    text-align: center;
    line-height: 100px;
    font-weight: 600;
    font-size: 12px;
  }
</style>

<div class="self-region" id="self-region">区域</div>

<script>
  document.addEventListener('click', handlerClick)  // 监听 document 点击事件
  
  function handlerClick(event) {
    let isSelf = document.getElementById('self-region').contains(event.target)  // 这个是自己的区域
    if(!isSelf) {
      console.log('没在区域里面-->>>')
    }else {
      console.log('在区域里--->>>>>')
    }
  }

  setTimeout(() => {  //  在不需要的时候移除监听事件
    document.removeEventListener('click', handlerClick)
  },5000)
</script>

?首先找到这个区域，然后点击document的时候将这个区域排除掉即可。

这里没有采用匿名函数，这样在将来不需要监听的时候，可以移除掉click事件。