为什么要用触摸事件?
触摸事件是移动浏览器特有的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