导航
导航
文章目录
  1. 4个touch事件
  2. 触摸事件:
  3. Touch对象属性
  4. 事件(包括鼠标事件)发生的顺序如下:

移动端touch事件

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