处理DIV元素嵌套情况下的事件响应

最新推荐文章于 2022-09-29 21:45:00 发布

fyl_077

最新推荐文章于 2022-09-29 21:45:00 发布

阅读量1k

点赞数

分类专栏： Web编程

本文链接：https://blog.csdn.net/fyl_077/article/details/9389809

版权

Web编程专栏收录该内容

20 篇文章 0 订阅

订阅专栏

DIV元素在嵌套情况下响应事件时会发生重叠，比如下例：

点击DIV0时只会响应DIV0的事件处理，但点击DIV1时会先响应DIV1事件，然后又响应DIV0事件。

这通常是不符合我们的要求的。

怎么解决呢？

<html >
<body>

<div id="DIV0" style="background:blue;width:500px;height:100px;" align="center"
	οnclick="clickDiv0(this);">
	<div id="DIV1" style=" left:0px;background:yellow;width:100px;height:100px;;" align="center"
	οnclick="clickDiv1(this);">
	</div>
</div>
<script type="text/javascript">
function clickDiv0(obj){
	alert("id:"+obj.id);
	obj.style.background="red";
}

function clickDiv1(obj){
	alert("id:"+obj.id);
	obj.style.background="green";
}
</script>

</body>
</html>

解决办法：

首先分析事件响应重叠的原因：因为元素重叠，这时内层DIV1的点击动作同时会触发外层DIV0的点击事件。

因此我们可以只给DIV0设置事件响应，然后判断实际触发的位置是在DIV0还是DIV1，再做相应的处理。

修改后的代码如下：

<html >
<body>

<div id="DIV0" style="background:blue;width:500px;height:100px;" align="center"
	οnclick="">
	<div id="DIV1" style=" left:0px;background:yellow;width:100px;height:100px;;" align="center"
	οnclick="">
	</div>
</div>
<script type="text/javascript">
//document.getElementById("DIV0").οnclick=function(e){
onTagclick=function(e){
	e=e||window.event;
	var tag = e.target || e.srcElement;  
	//tag就是当前被点击的元素,下面可对tag做任何通用操作
	//alert("id:"+tag.id);
	//对不同元素做不同操作,需预先设置元素id
	if (tag.id=="DIV0"){clickDiv0(tag);} //<--执行你想要的代码
	if (tag.id=="DIV1"){clickDiv1(tag);} //<--执行你想要的代码
}; 
document.getElementById("DIV0").οnclick=onTagclick;  //***只给DIV0事件响应赋值

function clickDiv0(obj){
	alert("id:"+obj.id);
	obj.style.background="red";
}

function clickDiv1(obj){
	alert("id:"+obj.id);
	obj.style.background="green";
}
</script>

</body>
</html>