css - 如何在 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) 时更改 div#red 的颜色; 颜色:白色)或外部点击((背景:蓝色；颜色:白色)和自己的点击(背景:黄色；颜色:黑色)。考虑此页面上有几个元素，然后如何检测点击在 div#red 之外并应用效果？

Answer 1

您应该使用在 EventListener 上传递给监听器的事件功能。该事件包含一个目标属性，它是收到点击的元素。检查目标 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>