Home » Code » javascript touch事件

javascript touch事件

javascript中的触摸事件用得最多的是以下三种:

  • touchstart:手指放在一个DOM元素上。
  • touchmove:手指拖曳一个DOM元素。
  • touchend:手指从一个DOM元素上移开。

每个触摸事件都包括以下三个触摸列表:

  • touches:当前位于屏幕上的所有手指的一个列表。
  • targetTouches:位于当前DOM元素上的手指的一个列表。
  • changedTouches:涉及当前事件的手指的一个列表。

不同设备对于触摸事件和鼠标事件的响应顺序与响应与否都有所差异。对于调试,在PC上Chrome浏览器自带的模拟器不错,但版本升级到38背景也滚动功能多了却变得比较卡,建议使用不高于37的版本。而真机调试的时候,debuggap是个不错的选择,电脑端绿色程序启动,网页引入它的js文件,即可连接在电脑端修改移动端浏览器即时显示,输出console信息也是没有问题,只是信息与Chrome模拟器输出的有时略有不同。官方网站点此访问

通过以下代码测试一下触碰与滑动一下屏幕会触发哪些常见的事件:

$("#touch").on('touchstart touchmove touchend touchcancle mousemove mouseout mouseover scroll click', 'li', function(e){
	console.log(e.type + ':' + e.timeStamp);
});

在Chrome模拟器上点击一下输出:

touchstart:1413622306707 
touchend:1413622306795 
mouseover:1413622306798 
mousemove:1413622306799 
click:1413622306800

以上是第一次点击,往后的点击还会在touchend后多一个mouseont。而在Android (4.0.4)上,输出的信息是

mouseover:1413622996099
mousemove:1413622996146
touchstart:1413622996152
touchend:1413622996182
click:1413622996253

iPad(IOS 7.1.2)上的输出:

touchstart:1413624788922
touchend:1413624788981
mouseout:1413624789355
mouseover:1413624789356
mousemove:1413624789357
click:1413624789413

可以看到,Chrome模拟器跟IOS设备的响应顺序是一致的,而Android却是先响应鼠标的mouseover事件,从最先的到最后一个click时差分别是:93ms(Chrome模拟器)、154ms(Android 4.0.4)、491ms(IOS 7.1.2),可以看到,Android先响应了鼠标的mouseover事件,IOS优先响应touchstart,鼠标事件被滞后400多毫秒才矛以响应。

而滑动的时候,Chrome模拟器和IOS都只输出touchstart,touchmove,touchend,Android却是输出了mouseout,mouseover,mousemove,touchstart,touchmove这么多,还没有touchend(这好像说是Android 4.x之后的bug,但如果在touchstart或者touchmove事件中preventDefault一下,就有touchend了,但这样子之后没法滚动页面),实在有点匪夷所思了。以上三平台,touchend之前任一事件或touchend事件中有了preventDefault,touchend及它之前的事件会触发,它之后的不会触发。也就是touchend之前的是不能阻止的,touchend之后的是可以被阻止的。

每个触摸点对应的Touch都有三个重要的属性:screenX/screenY,pageX/pageY和clientX/clientY。screen是发生位置相对屏幕的偏移量,page和client都表示发生位置相对对象的偏移量,只是page包括滚动而隐藏的领衔量,client则不包括滚动而隐藏的偏移量。下面看一个在一个需要滚动的页面滑出删除按钮的例子:

html结构

<div id="touch">
	<ul>
		<li><a href="aa.html"><img src="images/1.jpg"></a><a href="bb.html">继续阅读</a></li>
		<li><a href="aa.html"><img src="images/2.jpg"></a><a href="bb.html">继续阅读</a></li>
		<li><a href="aa.html"><img src="images/3.jpg"></a><a href="bb.html">继续阅读</a></li>
		<li><a href="aa.html"><img src="images/4.jpg"></a><a href="bb.html">继续阅读</a></li>
		<li><a href="aa.html"><img src="images/5.jpg"></a><a href="bb.html">继续阅读</a></li>
		<li><a href="aa.html"><img src="images/6.jpg"></a><a href="bb.html">继续阅读</a></li>
		<li><a href="aa.html"><img src="images/7.jpg"></a><a href="bb.html">继续阅读</a></li>
		<li><a href="aa.html"><img src="images/8.jpg"></a><a href="bb.html">继续阅读</a></li>
	</ul>
</div>

touch

需要做的是在每个li上滑动时弹出删除按钮,点击可以将之删除。看javascript实现:

window.onload = function(){		
	var x = y = dx = dy = 0;
	var showed = false;
	var crossX = 10;
	var crossY = 10;
	$('#touch').delegate('li', 'touchstart touchmove', function(e){			
		if(e.type == 'touchstart'){				
			if(showed){
				if(touch.target.className === 'delbtn'){
					$(this).remove();
				}					
				$('.delbtn').remove();					
				e.preventDefault();
				showed = false;
				x = y = dx = dy = 0;
			}else{
				x = touch.pageX;
				y = touch.pageY;
			}
		}else if(e.type == 'touchmove'){
			if(showed){
				return;
			}
			var mx = touch.pageX;
			var my = touch.pageY;				
			dx = mx - x;
			dy = my - y;
			if(Math.abs(dx) > crossX && Math.abs(dy) < crossY){
				$(this).append('<a href="cc.html" class="delbtn">删除</a>');
				showed = true;
				x = y = dx = dy = 0;
			}
		}
	});
}

以上是简单的单点滑动,对于双点或以上,电脑上暂不知道该如何模拟,不能模拟调试起来就比较困难了,不知道专业人士是如何做的。

查看简易demo

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Time limit is exhausted. Please reload CAPTCHA.