target属性返回一个Element节点,代表触摸发生的那个节点。当这个触点最开始被跟踪时(在 touchstart 事件中), 触点位于的HTML元素. 哪怕在触点移动过程中, 触点的位置已经离开了这个元素的有效交互区域, 或者这个元素已经被从文档中移除. 需要注意的是, 如果这个元素在触摸过程中被移除, 这个事件仍然会指向它, 但是不会再冒泡这个事件到 window 或 document 对象. 因此, 如果有元素在触摸过程中可能被移除, 最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件. 只读属性.
TouchList对象:是一个类似数组的对象,成员是与某个触摸事件相关的所有触摸点。比如,用户用三根手指触摸,产生的TouchList对象就有三个成员,每根手指对应一个Touch对象。TouchList实例的length属性,返回TouchList对象的成员数量。TouchList实例的identifiedTouch方法和item方法,分别使用id属性和索引值(从0开始)作为参数,取出指定的Touch对象。
TouchEvent对象:表示触摸引发的事件。除了被继承的属性以外,它还有一些自己的属性。
键盘相关属性altKey、ctrlKey、metaKey、shiftKey都为只读属性,返回一个布尔值,表示触摸的同时,是否按下某个键
changedTouches属性返回一个TouchList对象,包含了由当前触摸事件引发的所有Touch对象(即相关的触摸点)。它包含了代表所有从上一次触摸事件到此次事件过程中,状态发生了改变的触点的 Touch 对象。只读属性。
targetTouches属性返回一个TouchList对象,包含了触摸的目标Element节点内部,所有仍然处于活动状态的触摸点。
touches属性返回一个TouchList对象,包含了所有当前接触触摸平面的触点的 Touch 对象,无论它们的起始于哪个 element 上,也无论它们状态是否发生了变化。只读属性
type属性指此次触摸事件的类型。
target属性此次触摸事件的目标 element 。这个目标元素对应 TouchEvent.changedTouches 中的触点的起始元素(在之后的事件类型中有说明),但是请注意:此次事件中其他的触点的起始元素可能有所不同。以防万一,应使用和每一个单独触点相关联的目标 。
通过TouchEvent.type属性可以查看触摸事件的种类:
touchstart:用户接触触摸屏时触发,它的target属性返回发生触摸的Element节点。
touchend:用户不再接触触摸屏时(或者移出屏幕边缘时)触发,它的target属性与touchstart事件的target属性是一致的,它的changedTouches属性返回一个TouchList对象,包含所有不再触摸的触摸点(Touch对象)。
touchmove:用户移动触摸点时触发,它的target属性与touchstart事件的target属性一致。如果触摸的半径、角度、力度发生变化,也会触发该事件。
touchenter当触点进入某个 element 时触发。此事件没有冒泡过程。
touchleave当触点离开某个 element 时触发。此事件没有冒泡过程。
touchcancel:当触点由于某些原因被中断时触发。有几种可能的原因如下(具体的原因根据不同的设备和浏览器有所不同):1.由于某个事件取消了触摸:例如触摸过程被一个模态的弹出框打断。2.触点离开了文档窗口,而进入了浏览器的界面元素、插件或者其他外部内容区域。3.当用户产生的触点个数超过了设备支持的个数,从而导致 TouchList 中最早的 Touch 对象被取消。
function handleMove(evt) {
evt.preventDefault(); // 阻止浏览器继续处理触摸事件,也阻止发出鼠标事件
var touches = evt.changedTouches;
for (var i = 0; i < touches.length; i++) {
var id = touches[i].identifier;
var touch = touches.identifiedTouch(id);
console.log(touch.pageX, touch.pageY);
}
}