如何在div区域外点击以生效？

Question

 document.getElementById("red").addEventListener("click",function(){ document.getElementById("red").style.backgroundColor = "yellow"; document.getElementById("red").style.color = "#000"; }); document.getElementById("green").addEventListener("click",function(){ document.getElementById("red").style.backgroundColor = "red"; document.getElementById("red").style.color = "#fff"; }); 

 #red{ width:50px; height:100px; background-color:red; color:#fff; text-align:center; margin-bottom:10px; } #green{ width:100px; height:50px; background-color:green; color:#fff; text-align:center; } 

 <div id="red">div area1</div> <div id="green"> div area2</div> 

是否有可能检测到div区域之外的点击并对其执行操作。在上面的代码中，我试图在div＃green（background：red; color：白色）或外部点击（（背景：蓝色；颜色：白色），以及自己单击（背景：黄色；颜色：黑色）。请考虑此页面上有多个元素，然后如何检测外部点击div＃red并应用效果？

Answer 1

您应该在EventListener函数上使用传递给侦听器的事件 。 该事件包含一个target属性，该属性是获得点击的元素。 检查目标ID，然后针对每种情况执行所需的操作。 这是一个示例：

 document.getElementsByTagName("html")[0].addEventListener("click",function(e){ if(e.target.id == "red"){ document.getElementById("red").style.backgroundColor = "yellow"; document.getElementById("red").style.color = "#000"; } else{ document.getElementById("red").style.backgroundColor = "red"; document.getElementById("red").style.color = "#fff"; } }); 

 #red{ width:50px; height:100px; background-color:red; color:#fff; text-align:center; margin-bottom:10px; } #green{ width:100px; height:50px; background-color:green; color:#fff; text-align:center; } 

 <div id="red">div area1</div> <div id="green"> div area2</div> 

Answer 2

您可以做的就是在文档本身上添加一个单击，并使用传递给click函数的事件对象来帮助检测正在单击的项目。 利用这些信息，您可以检测到点击是来自元素内部还是外部

document.addEventListener("click",function(ev){
  if(ev.target.id !== "red" && ev.target.id !== "green"){ 
      document.getElementById("red").style.backgroundColor = "blue";
  }
}) 

这是一个工作的小提琴