移动端的点透

最新推荐文章于 2022-03-08 18:42:05 发布

我的奋斗ing

最新推荐文章于 2022-03-08 18:42:05 发布

阅读量137

点赞数

分类专栏：移动端开发深度揭秘

本文链接：https://blog.csdn.net/qq_35187942/article/details/88863497

版权

移动端开发深度揭秘专栏收录该内容

8 篇文章 1 订阅

订阅专栏

移动端的点透

		当上层元素发生点击的时候，下层元素也有点击（焦点）特性，
		在300S之后，如果上层元素消失或隐藏，目标点就会漂移到下层元素身上，
		就会触发点击行为。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no"/>
		<title></title>
		<style>
			#div1{
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
				left: 0;
				top:0;
				opacity: 0.5;
			}
		</style>
	</head>
	<body>
		<a href="http://www.miaov.com">点我！！！！</a>
		<div id="div1">1</div>
		<script>
			var div = document.getElementById("div1");
			div.addEventListener('touchend',end);
			function end(){
				this.style.display = 'none';
			}
		</script>
	</body>
</html>

在这里插入图片描述

解决：

		1.下层不要使用有点击（焦点）特性的元素

<p>点我!!!!</p>
<!--<a href="http://www.miaov.com">点我！！！！</a>-->

       2.阻止pc的事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no"/>
		<title></title>
		<style>
			#div1{
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
				left: 0;
				top:0;
				opacity: 0.5;
			}
		</style>
	</head>
	<body>
		<a href="http://www.miaov.com">点我！！！！</a>
		<div id="div1">1</div>
		<script>
		document.addEventListener('touchstart',function(ev){
			ev.preventDefault();
		});
		
			var div = document.getElementById("div1");
			var a = document.getElementById("a");
			div.addEventListener('touchend',end);
			
			a.addEventListener('touchstart',function(){
				window.location.href = 'http://www.miaov.com';
			})
			
			function end(){
				this.style.display = 'none';
			}
		</script>
	</body>
</html>