0
点赞
收藏
分享

微信扫一扫

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

前言

本文主要记录了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事件进行封装。

在这里插入图片描述

本文到此结束

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

举报

相关推荐

0 条评论