使用javascript检测在div外部点击

Question

我想检测div区域内外的点击.棘手的部分是div将包含其他元素,如果单击div中的一个元素,则应将其视为内部单击,如果单击div外部的元素,则应将其视为外部单击.

我一直在研究很多,但我能找到的只是jquery中的例子,我需要纯粹的javascript.

任何建议将不胜感激.

Answer 1

它取决于个别用例,但听起来像在这个例子中,主div内可能有其他嵌套元素,例如更多的div,列表等.使用Node.contains将是检查目标元素是否在内的有用方法正在检查的div.

window.addEventListener('click', function(e){   
  if (document.getElementById('clickbox').contains(e.target)){
    // Clicked in box
  } else{
    // Clicked outside the box
  }
});

这里有一个嵌套列表的例子.

Answer 2

您可以检查单击的 Element 是否是您要检查的 div：

document.getElementById('outer-container').onclick = function(e) {
  if(e.target != document.getElementById('content-area')) {
      console.log('You clicked outside');
  } else {
      console.log('You clicked inside');
  }
}

参考这里。