Question

＆＃13;

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";
});

＆＃13;

#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;
  }

＆＃13;

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

＆＃13;

是否可以检测到div区域外的点击并对其执行操作。在上面的代码中，我尝试在点击div＃green（背景）时更改div＃red的颜色：红色;颜色：白色）或外部点击（（背景：蓝色;颜色：白色）和自己点击（背景：黄色;颜色：黑色）。考虑此页面上有几个元素，然后如何检测点击div＃red外面并应用效果？

Answer 1

您应该使用EventListener函数上传递给侦听器的事件。该事件包含一个target属性，该属性是接收到该单击的元素。检查目标ID并在每种情况下执行您需要的操作。这是一个示例：

for table in result as Any as! NSArray {
    for row in table as! NSArray {
        if let dic = row as? [String : Any] {
            let data1 = dic["data1"] as! String
            let data2 = dic["data2"] as! Double
            let data3 = dic["data3"] as! String
            let data4 = dic["data4"] as! String
            let data5 = dic["data5"] as! String
            let newData =  MyData(data1: data1, data2: data2, data3: data3, data4: data4, data5: data5)
            self.data.append(newData)
        }
    }
}
self.tableView.reloadData()

daterange

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";
	}
});

Answer 2

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

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

这是一个有效的fiddle

如何实现div区域外的点击？

2 个答案: