移动端touch事件
2017.03.22
hzzly
4个touch事件
touchstart 事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
touchmove 事件：当手指在屏幕上滑动的时候连续地触发。调用preventDefault()事件可以阻止滚动。
touchend 事件：当手指从屏幕上离开的时候触发。
touchcancel 事件：触摸结束的时候触发
触摸事件：
touches：当前位于屏幕上的所有手指的列表。
targetTouches：位于当前DOM元素上手指的列表。
changedTouches：涉及当前事件手指的列表。
Touch对象属性
每个Touch对象包含的属性如下：
clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
identifier：标识触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
target：触摸的DOM节点目标。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| document.addEventListener('touchstart',touch,false);
document.addEventListener('touchmove',touch,false);
document.addEventListener('touchend',touch,false);
function touch (event){
var event = event || window.event;
var oInp = document.getElementById("inp");
switch(event.type){
case "touchstart":
oInp.innerHTML =`Touch started ( ${event.touches[0].clientX} , ${event.touches[0].clientY} )`;
break;
case "touchend":
oInp.innerHTML =`<br>Touch end ( ${event.changedTouches[0].clientX} , ${event.changedTouches[0].clientY} )`;
break;
case "touchmove":
event.preventDefault();
oInp.innerHTML =`<br>Touch moved ( ${event.touches[0].clientX} , ${event.touches[0].clientY} )`;
break;
}
}
|
事件(包括鼠标事件)发生的顺序如下：
(1) touchstart
(2) mouseover
(3) mousemove(一次)
(4) mousedown
(5) mouseup
(6) click
(7) touchend