前言

本文主要记录了touch事件的event对象，以及简单介绍了移动端脚本框架hammer.js。

event对象

event 对象代表事件的状态，当某个事件被触发时，会自动产生一个用来描述事件所有的相关信息。

   function handStart (e){
            console.log('handStart', e, e.changedTouches[0]);
        }

控制台打印event对象

TouchEvent {isTrusted: true, touches: TouchList, targetTouches: TouchList, changedTouches: TouchList, altKey: false, …}
altKey: false
bubbles: true       //***************冒泡*******************
cancelBubble: false
cancelable: true
changedTouches: TouchList    //********************触摸事件列表，是一个类数组*******************
	0: Touch {identifier: 0, target: div#div, screenX: 384, screenY: 296, clientX: 130.5263214111328, …}   //**********************下标从0开始***********************
	length: 1   //*****************长度为1，发生变化触摸点（手指）的个数**************************
	__proto__: TouchList
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 0
eventPhase: 0
isTrusted: true
metaKey: false
path: (5) [div#div, body, html, document, Window]
returnValue: true
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: true}
srcElement: div#div
target: div#div  	//********************触发事件的DOM元素****************************
targetTouches: TouchList
	0: Touch {identifier: 0, target: div#div, screenX: 384, screenY: 296, clientX: 130.5263214111328, …}
	length: 1  //******************目标（红色区域）上触摸点（手指）的个数**********************
	__proto__: TouchList
timeStamp: 948.7999999523163
touches: TouchList
	0: Touch {identifier: 0, target: div#div, screenX: 384, screenY: 296, clientX: 130.5263214111328, …}
	length: 1   //************************全部（整个屏幕）触摸点（手指）的个数******************************
__proto__: TouchList
type: "touchstart"    //*******************当前响应的事件处理函数***************************
view: Window {window: Window, self: Window, document: document, name: "", location: Location, …}
which: 0
__proto__: TouchEvent

• touches 全部（整个屏幕）触摸点（手指）的个数；
• targetTouches 目标（红色区域）上触摸点（手指）的个数；
• changedTouches 发生变化触摸点（手指）的个数；

控制台打印changedTouches对象

Touch {identifier: 0, target: div#div, screenX: 278.3999938964844, screenY: 280.8000183105469, clientX: 146.7368621826172, …} 
clientX: 146.7368621826172   //*******可视区距离左上顶点的横向距离（不含滚动条）********
clientY: 117.68424224853516  //*******可视区距离左上顶点的纵向距离（不含滚动条）********
force: 1
identifier: 0
pageX: 146.7368621826172    //*******页面距离左上顶点的横向距离（含滚动条）********
pageY: 117.68424224853516   //*******页面距离左上顶点的纵向距离（含滚动条）********
radiusX: 12.105263710021973
radiusY: 12.105263710021973
rotationAngle: 0
screenX: 278.3999938964844
screenY: 280.8000183105469
target: div#div
__proto__: Touch

• clientX、clientY是从可视区左上角开始算；
• pageX、pageY是从页面左上角开始算，包括通过滚轴滚动的部分；
• screenX、screenY触摸点在屏幕中的x，y坐标；

扩展

HAMMER.JS

hammer.js是一个移动端脚本框架，它实现了移动端开发的大多数事件（如：点击、滑动、拖动、多点触控等），避免了我们自己使用touch事件进行封装。

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！