touch的深入理解

最新推荐文章于 2021-06-24 19:23:02 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2021-06-24 19:23:02 发布

阅读量887

点赞数

分类专栏：手机端大全解决

本文链接：https://blog.csdn.net/qq_37805832/article/details/109349976

版权

手机端大全解决专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!doctype html> 
<html> 
<head> 
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta charset="utf-8"> 
    <title></title>
    <style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#div1{width: 200px;height: 200px;background: black;}


    </style> 
</head>
<body>
<div id='div1'></div>
<script type="text/javascript">
	/*
	div1.onclick = function(){
		alert(1);
	};
	*/
	/*
	div1.touchstart = function(){
		alert(1);
	}
	*/
var div1=document.querySelector("#div1");
	div1.addEventListener('touchstart',function(){
		alert(1);
	},false);

</script>
</body>
</html>

记住,touch只在这里有效.
在这里插入图片描述

效果：

在这里插入图片描述

<!doctype html> 
<html> 
<head> 
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta charset="utf-8"> 
    <title></title>
    <style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#div1{width: 200px;height: 200px;background: black;}


    </style> 
</head>
<body>
<div id='div1'></div>
<script type="text/javascript">
	/*
	div1.onclick = function(){
		alert(1);
	};
	*/
	/*
	div1.touchstart = function(){
		alert(1);
	}
	*/

	div1.addEventListener('touchmove',function(){
		//alert(1);
		this.style.background = 'rgb('+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+')'
	},false);

</script>
</body>
</html>

256是因为只有范围最大只在256这个范围内.

在这里插入图片描述

<!doctype html> 
<html> 
<head> 
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta charset="utf-8"> 
    <title></title>
    <style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#div1{width: 200px;height: 200px;background: black;}


    </style> 
</head>
<body>
<div id='div1'></div>
<script type="text/javascript">
	/*
	div1.onclick = function(){
		alert(1);
	};
	*/
	/*
	div1.touchstart = function(){
		alert(1);
	}
	*/

	div1.addEventListener('touchend',function(){
		//alert(1);
		alert(1);
	},false);

</script>
</body>
</html>

注意一下，是结束哈

在这里插入图片描述

<!doctype html> 
<html> 
<head> 
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta charset="utf-8"> 
    <title></title>
    <style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#div1{width: 200px;height: 200px;background: black;
	position: relative;
}
#div2{
	position: absolute;
	width: 50px;height: 50px;
	background: red;left: 500px;top: 500px;
}

    </style> 
</head>
<body>
<div id='div1'>
	<div id='div2'></div>
</div>
<script type="text/javascript">
	


div1.onclick = function(ev){
	console.log(ev)
	alert(1);
};
div2.onclick = function(ev){
	ev.cancelBubble=true;
};



</script>
</body>
</html>