移动web js触屏事件

移动web js触屏事件 按下 松开 滑动讲解

一、触摸事件

ontouchstart

ontouchmove

ontouchend

ontouchcancel 

 

目前移动端浏览器均支持这4个触摸事件，包括IE。由于触屏也支持MouseEvent，因此他们的顺序是需要注意的：

 

touchstart → mouseover → mousemove → mousedown → mouseup → click1

 

/*** onTouchEvent*/

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

var div = document.getElementById("div"); //touchstart类似mousedown div.ontouchstart = function(e){ //事件的touches属性是一个数组，其中一个元素代表同一时刻的一个触控点，从而可以通过touches获取多点触控的每个触控点 //由于我们只有一点触控，所以直接指向[0] var touch = e.touches[0]; //获取当前触控点的坐标，等同于MouseEvent事件的clientX/clientY var x = touch.clientX; var y = touch.clientY; }; //touchmove类似mousemove div.ontouchmove = function(e){ //可为touchstart、touchmove事件加上preventDefault从而阻止触摸时浏览器的缩放、滚动条滚动等 e.preventDefault(); }; //touchend类似mouseup div.ontouchup = function(e){ //nothing to do };