触屏设备浏览器javascript响应滑动事件

最新推荐文章于 2024-01-24 18:53:27 发布

LittleLeeZi

最新推荐文章于 2024-01-24 18:53:27 发布

阅读量2.6k

点赞数

分类专栏： javascript 文章标签： html 浏览器 javascript 滑动

本文链接：https://blog.youkuaiyun.com/superick/article/details/38416969

版权

javascript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在触屏设备的浏览器上利用TouchEvent事件（包括touchstart，touchmove，touchend）来实现类似app的滑动交互。通过分析pageX、pageY和timeStamp属性，可以判断用户的滑动手势方向，例如向左、向右、向上或向下。文中还提及jQuery Mobile框架提供了更简便的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想要在触屏设备的浏览器上实现响应类似于app的滑动事件，就要使用浏览器的TouchEvent事件，pc浏览器不支持该事件（PC上也没有触摸和滑屏事件），大部分手机和平板的浏览器都支持该事件。

TouchEvent事件分为三类，touchstart，touchmove，touchend。这三个事件最重要的属性是 pageX和 pageY,表示事件发生的X,Y坐标，以及timeStamp属性，表示事件发生的时间戳。
1，touchstart在触摸开始时触发事件;
2，touchend在触摸结束时触发事件;
3，touchmove在触摸到过程中不断激发;

查看 timeStamp 属性，可以看到顺序是 touchstart -> touchmove ->touchmove -> … -> touchmove ->touchend。

通过计算touchstart和touchend时的pageX和pageY的差值，即可判断出用户的手势是向左还是向右，向上还是向下滑动。

下面是实现代码：

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>触屏设备滑动事件</title>
	<script type="text/javascript">
		window.οnlοad=function(){
			//判断是否支持触摸事件  
			function isTouchDevice() {  
			   //浏览器版本信息
			   document.getElementById("version").innerHTML = navigator.appVersion;  
			   try {
			   		document.createEvent("TouchEvent");  
					alert("支持TouchEvent事件！");  
			   } catch (e) {  
				  	alert("不支持TouchEvent事件！" + e.message);  
			   }  
			}  
	 		isTouchDevice();
	 		
			var objDiv=document.getElementById("demo");
			var startX,startY,endX,endY;
			objDiv.addEventListener("touchstart",function(e){
// 				alert("touchstart");
				//var x=e.targetTouches[0].pageX;
				//var y=e.targetTouches[0].pageY;
				//alert(x+","+y);
				//alert(e.timeStamp);			//事件发生时的时间戳
				startX=e.targetTouches[0].pageX;
				startY=e.targetTouches[0].pageY;
			});
			objDiv.addEventListener("touchmove",function(e){
// 				alert("touchmove");
				//var x=e.targetTouches[0].pageX;
				//var y=e.targetTouches[0].pageY;
				//alert(x+","+y);
				//alert(e.timeStamp);
			});
			objDiv.addEventListener("touchend",function(e){
// 				alert("touchend");
				//var x= e.changedTouches[0].pageX;
				//var y= e.changedTouches[0].pageY;
				//alert(x+","+y);
				endX= e.changedTouches[0].pageX;
				endY= e.changedTouches[0].pageY;
				alert((endX-startX)+","+(endY-startY));
				if(endX-startX>0){
					alert("向右滑动");
				}
				if(endX-startX<0){
					alert("向左滑动");
				}
				if(endY-startY>0){
					alert("向下滑动");
				}
				if(endY-startY<0){
					alert("向上滑动");
				}
				if((endX-startX==0)&&(endY-startY==0)){
					alert("tap事件");
				}
			});
		}
	</script>
</head>
<body>
	<div id="demo" style="width:100%;height:500px;border:1px solid red;"></div>
    <p id="version"></p>
</body>
</html>

jQuery Mobile框架的实现更加简单：

$("#demo").bind("swipeleft",function(){
   //向左滑动				
}).bind("swiperight",function(){
   //向右滑动		
});

经过对多个手机浏览器的测试，俩种方法都不能兼容全部浏览器，说明部分浏览器的兼容性不好或者没有遵循w3c的规范