HTML5触摸事件

html5

浏览数:1,461

2017-5-18

为什么要用触摸事件?

触摸事件是移动浏览器特有的HTML5事件,但这当然不是用触摸事件的主要理由。因为移动端的click有很大延迟(大约300ms),300ms延迟来自判断双击和长按,因为只有默认等待时间结束以确定没有后续动作发生时,才会触发click事件。而触摸事件的延迟则是非常短的,使用触摸事件的能够提高页面响应速度,带来更好的用户体验。

标准的触摸事件

Webkit内的触摸事件

事件名称 描述 包含touches数组
touchstart 触摸开始(用户把手指放在屏幕上)
touchmove 接触点改变(用户在屏幕上移动他的手指且手指不离开屏幕)
touchend 触摸结束(用户的手指离开屏幕)
touchcancel 触摸被取消(触摸被一些事情中断,比如通知)

P.S.touches数组是触摸对象数组,触摸对象携带着我想要的数据

触摸对象的属性

属性 描述
identifier 本次触摸的唯一标识符,只要用户的手指保持在屏幕上,这个值就不会改变
screenX 触点相对于屏幕左侧的距离
screenY 触点相对于屏幕顶部的距离
clientX 触点相对于浏览器窗口左侧的距离
clientY 触点相对于浏览器窗口顶部的距离
pageX 触点相对于页面左侧的距离
pageY 触点相对于页面顶部的距离
target 获取事件源,类似于event.target

P.S.其实还有三个属性:radiusX/radiusY,rotationAngle,force但由于兼容性差且浏览器实现有差异,在此不做介绍

IE10的触摸事件

IE指针事件

事件名称 描述(在触摸设备上)
MSPointerDown 触摸开始
MSPointerMove 接触点移动
MSPointerUp 触摸结束
MSPointerOver 触摸点移动到元素内,相当于mouseover
MSPointerOut 触摸点离开元素,相当于mouseout

P.S.IE叫指针事件,因为该事件有三种触发形式:鼠标单击,电子笔轻触和手指触摸

MSPointerEvent属性

属性 描述
hwTimestamp 创建事件的时间(ms)
isPrimary 标识该指针是不是主指针
pointerId 指针的唯一ID(类似于触摸事件的标识符)
pointerType 一个整数,标识了该事件来自鼠标、手写笔还是手指
pressure 笔的压力,0-255,只有手写笔输入时才可用
rotation 0-359的整数,光标的旋转度(如果支持的话)
tiltX/tiltY 手写笔的倾斜度,只有用手写笔输入时才支持

检测pointerType:

function handleEvent(event){
  switch(event.pointerType){
    case event.MSPOINTER_TYPE_TOUCH:
  //手指
  break;
case event.MSPOINTER_TYPE_PEN:
  //手写笔
  break;
case event.MSPOINTER_TYPE_MOUSE:
  //鼠标
  break;
 default:
   break;
  }
}
document.body.addEventListener("MSPointerDown", handleEvent, false);

封装好tap事件源码:(tap即移动端的click)

(function(){
	var TOUCHSTART, TOUCHEND;
	//normal touch events
	if (typeof(window.ontouchstart) != 'undefined') {
		TOUCHSTART = 'touchstart';
		TOUCHEND   = 'touchend';
	//microsoft touch events
	} else if (typeof(window.onmspointerdown) != 'undefined') {
		TOUCHSTART = 'MSPointerDown';
		TOUCHEND   = 'MSPointerUp';
	} else {
		TOUCHSTART = 'mousedown';
		TOUCHEND   = 'mouseup';
	}
	function NodeFacade(node){
		this._node = node;
	}
	NodeFacade.prototype.getDomNode = function() {
		return this._node;
	}
	NodeFacade.prototype.on = function(evt, callback, scope) {
		var scopeObj;
		if(!scope) {
			scopeObj = this._node;
		} else{
			scopeObj = scope;
		}
		if (evt === 'tap') {
			this._node.addEventListener(TOUCHSTART, function() {
				callback.apply(scope, arguments);
			});
		} else if (evt === 'tapend') {
			this._node.addEventListener(TOUCHEND, function() {
				callback.apply(scope, arguments);
			});
		} else {
			this._node.addEventListener(evt, function() {
				callback.apply(scope, arguments);
			});
		}
		return this;
	}
	window.$ = function(selector) {
		var node = document.querySelector(selector);
		if(node) {
			return new NodeFacade(node);
		} else {
			return null;
		}
	}
})();

P.S.以上源码来自touch-interfaces.com

参考资料

《HTML5触摸界面设计与开发》

原文地址:http://www.ayqy.net/blog/html5触摸事件/?utm_source=tuicool&utm_medium=referral