一、手机上的触摸事件
基本事件：
touchstart //手指刚接触屏幕时触发
touchmove //手指在屏幕上移动时触发
touchend //手指从屏幕上移开时触发
下面这个比较少用：
touchcancel //触摸过程被系统取消时触发
每个事件都有以下列表，比如touchend的targetTouches当然是 0 咯：
touches //位于屏幕上的所有手指的列表
targetTouches //位于该元素上的所有手指的列表
changedTouches //涉及当前事件的所有手指的列表
每个事件有列表，每个列表还有以下属性：
复制代码
其中坐标常用pageX,pageY：
pageX //相对于页面的 X 坐标
pageY //相对于页面的 Y 坐标
clientX //相对于视区的 X 坐标
clientY //相对于视区的 Y 坐标
screenX //相对于屏幕的 X 坐标
screenY //相对于屏幕的 Y 坐标
identifier // 当前触摸点的惟一编号
target //手指所触摸的 DOM 元素
其他相关事件：
event.preventDefault（） //阻止触摸时浏览器的缩放、滚动条滚动
var supportTouch = "createTouch" in document //判断是否支持触摸事件
更多深入内容？点击：http://www.cesclub.com/bw/jishuzhongxin/Webjishu/2011/1216/18069.html
二、示例
以下是获取不同类型滑动的代码具体做法，结合前人的思想，封装好了，可以借鉴学习：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
var
touchFunc =
function
(obj,type,func)
var
init = x:5,y:5,sx:0,sy:0,ex:0,ey:0;
var
sTime = 0, eTime = 0;
type = type.toLowerCase();
obj.addEventListener(
"touchstart"
,
function
()
sTime =
new
Date().getTime();
init.sx = event.targetTouches[0].pageX;
init.sy = event.targetTouches[0].pageY;
init.ex = init.sx;
init.ey = init.sy;
if
(type.indexOf(
"start"
) != -1) func();
,
false
);
obj.addEventListener(
"touchmove"
,
function
()
event.preventDefault();
init.ex = event.targetTouches[0].pageX;
init.ey = event.targetTouches[0].pageY;
if
(type.indexOf(
"move"
)!=-1) func();
,
false
);
obj.addEventListener(
"touchend"
,
function
()
var
changeX = init.sx - init.ex;
var
changeY = init.sy - init.ey;
if
(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y)
if
(changeX > 0)
if
(type.indexOf(
"left"
)!=-1) func();
js移动端触摸事件
移动端JS 触摸事件基础
JS触摸事件
js之移动端特效一
js之移动端特效一
移动端触摸相关事件touchtapswipe
|
|