2021-01-29

最新推荐文章于 2025-06-17 00:38:27 发布

csdn370139800

最新推荐文章于 2025-06-17 00:38:27 发布

阅读量112

点赞数 1

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/csdn370139800/article/details/113405888

版权

做一个前端框消失的案例:

需求:点击盒子外面消失掉盒子,盒子里面点击不消失.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			
			window.onload = function(){
				
				
//				var  d = document.getElementById('gg');
//				d.onclick = function(){
//					
//				}
				window.addEventListener('click',function(e){
					var  d = document.getElementById('gg');
					d.onclick = function(){
					
					}
//					alert(d.clientWidth);
//					alert(d.clientHeight);
				    var  width = d.clientWidth;
				    var  height = d.clientHeight;
				    var top = 0,
				        left = 0;
				    while(d){
				    	left += d.offsetLeft;
				    	top  += d.offsetTop;
				    	d = d.parentNode;
				    	if(d == document.body){
				    		break;
				    	}
				    }
//				     document.getElementById("gg").innerHTML = e.offsetX +':'+e.offsetY+'----------------'+left+":"+top; 					    	
					 if(!(e.offsetX+left >= left && e.offsetX+left <= (left+width) && e.offsetY+top >= top && e.offsetY+top <= (top+height)) ){

					 	document.getElementById("gg").style['width'] = '0px';
					 	document.getElementById("gg").style['height'] = '0px';
					 }
					 
				});
//				document.getElementById("gg").innerHTML = '1';
				
			}
		</script>
	</head>
	<body>
		<div id='gg' style="background-color: #0080FF;width: 100px;height:100px ;margin: 100px auto;">
			
		</div>
		
	</body>
</html>