略微加速

略速 - 互联网笔记

javascript触屏touch事件

2020-05-12 leiting (3444阅读)

标签 JavaScript

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成。但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。

以下是四种touch事件

touchstart:     //手指放到屏幕上时触发

touchmove:      //手指在屏幕上滑动式触发

touchend:    //手指离开屏幕时触发

touchcancel:     //系统取消touch事件的时候触发,这个好像比较少用

 

每个触摸事件被触发后,会生成一个event对象,event对象里额外包括以下三个触摸列表

touches:     //当前屏幕上所有手指的列表

targetTouches:      //当前dom元素上手指的列表,尽量使用这个代替touches

changedTouches:     //涉及当前事件的手指的列表,尽量使用这个代替touches

这些列表里的每次触摸由touch对象组成,touch对象里包含着触摸信息,主要属性如下:

clientX / clientY:      //触摸点相对浏览器窗口的位置

pageX / pageY:       //触摸点相对于页面的位置

screenX  /  screenY:    //触摸点相对于屏幕的位置

identifier:        //touch对象的ID

target:       //当前的DOM元素

 

注意:

手指在滑动整个屏幕时,会影响浏览器的行为,比如滚动和缩放。所以在调用touch事件时,要注意禁止缩放和滚动。

1.禁止缩放

通过meta元标签来设置。

<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">

2.禁止滚动

preventDefault是阻止默认行为,touch事件的默认行为就是滚动。

event.preventDefault();

 

源代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
<title>touch test</title>
<script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
<style>
html, body{width:100%; height:100%; margin:0; padding:0; background:#0F0;}
</style>
</head>
<body>
</body>
</html>

<script>

(function touchInit(){
	var startPos, endPos, isScrolling, direction, frequency;
	
	var init = (function init(){
		startPos = {};
		endPos = {};
		isScrolling;//isScrolling为1时,表示纵向滑动,-1为横向滑动
		direction = {x:0,y:0};//横向移动方向,左上负,右下正
		frequency = {x:0,y:0};//变换次数
		return init;
	})();

	$('html').on('touchstart',function(event)
	{
		console.log('touchstart');
		//touches数组对象获得屏幕上所有的touch,取第一个touch
		//originalEvent指向jquery事件的原始对象
		var touch = event.originalEvent.targetTouches[0];
		//取第一个touch的坐标值
		startPos = {x:touch.pageX,y:touch.pageY,time:+new Date};
		endPos = {x:touch.pageX,y:touch.pageY,time:+new Date};
	});
	
	$('html').on('touchmove',function(event)
	{
		console.log('touchmove');
		// 判断默认行为是否可以被禁用
		if (event.cancelable) {
			// 判断默认行为是否已经被禁用
			if (!event.defaultPrevented) {
				event.preventDefault();
			}
		}
		
		var touch = event.originalEvent.targetTouches[0];
		var scrPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
		var dirPos = {x:touch.pageX - endPos.x,y:touch.pageY - endPos.y};
		endPos = {x:touch.pageX,y:touch.pageY,time:+new Date};
		isScrolling = Math.abs(scrPos.x) < Math.abs(scrPos.y) ? 1 : -1;
		
		if(isScrolling > 0 && dirPos.y != 0)
		{
			var y = dirPos.y > 0 ? 1 : -1;
			if(direction.y != y)
			{
				direction.y = y;
				frequency.y++;
			}
		}
		else if(isScrolling < 0 && dirPos.x != 0)
		{
			var x = dirPos.x > 0 ? 1 : -1;
			if(direction.x != x)
			{
				direction.x = x;
				frequency.x++;
			}
		}
		
	});
	
	$('html').on('touchend',function(event)
	{
		console.log('touchend');
		
		if(direction.y > 0 && frequency.y == 1)
			alert('下滑')
		else if(direction.y < 0 && frequency.y == 1)
			alert('上滑')
		
		init();
	});
})();

</script>



北京半月雨文化科技有限公司.版权所有 京ICP备12026184号-3