html5最小化触发事件,HTML5触摸事件

一.为什么要用触摸事件？

触摸事件是移动浏览器特有的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，只有手写笔输入时才可用

rotation0-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);

其实还有一种更简单的针对手指的检测：直接判断touches数组是否存在，比如：

document.addEventListener('MSPointerDown', function(e){

switch(e.type){

case 'touchstart':var startPos = e.touches ? e.touches[0].pageX : e.screenX;

//...

}

}, 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;

}

}

})();

参考资料

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