移动Web开发入门(六) -- touch事件的event对象

本文已参与「新人创作礼」活动，一起开启掘金创作之路

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

event对象

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

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

控制台打印event对象

html 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对象

html 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事件进行封装。

本文到此结束

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