和其他的平板,win8也有着属于自己的一套触控输入的机制。输入方式不外乎三种:touch、mouse和keyboard,touch有两种类型的触发事件,分别是Gesture和Pointer,下面就主要为大家介绍一下这两种事件。
MSGesture:
事件类型有MSGestureTap、MSGestureHold、MSGestureStart、MSGestureChange、MSGestureEnd
Tap即轻点某一页面元素,Hold则是按住不放,Start、Change和End通常合起来完成一个手势,例如pan(拖动)、slide(滑动)、swipe(轻扫,用于显示AppBar、charm的一种手势)、pinch(缩放)和rotate(旋转)
属性:
screenX, screenY:相对屏幕中心点的坐标
clientX, clientY:相对应用的用户区中心点的坐标
offsetX, offsetY:相对所属元素中心点的坐标
translationX, translationY:沿x轴y轴的坐标
velocityX, velocityY:沿x轴y轴运动的速度
scale:缩放百分比
expansion:以像素为单位的绝对变化大小的区域
velocityExpansion:大小变化的速度
rotation:以弧度为单位的旋转角度
velocityAngular:弧度的角速度
detail:包含描述手势状态的标志
hwTimestamp
在一个元素上面添加Gesture:
首先,创建手势,并赋给元素,代码如下:
var gestureObject = new MSGesture(); gestureObject.target = divElement; divElement.gestureObject = gestureObject;
接着为divElement添加事件监听器,利用函数addEventlistner即可。在响应函数里实现当手势发生时要做的操作,注意,此时该元素还是无法响应事件的,必须为每一个手势连接一个pointer,例如在onPointerdown函数里添加如下代码:
function pointerDown(e) { //Associate this pointer with the target's gesture e.target.gestureObject.addPointer(e.pointerId); }
这样就完成在元素上添加Gesture
Pointer:
事件类型有:
MSPointerOver:Pointer从元素边界外移动到元素边界内
MSPointerHover:Pointer悬停在元素上
MSPointerDown:点击或者按下
MSPointerUp:释放
MSPointerCancel:取消事件
MSGotPointerCapture:捕获事件
MSLostPointerCapture:失去捕获事件
事件属性:
currentPoint:当前Pointer
pointerType:Pointer的类型,有touch、pen和mouse,MSPOINTER_TYPE_TOUCH (2), MSPOINTER_TYPE_PEN (3), and MSPOINTER_TYPE_MOUSE (4).
pointerId:唯一标识符
type:事件类型,如MSPointerDown
x, screenX, y, screenY:同Gesture
clientX, clientY:同Gesture
offsetX, offsetY:同Gesture
button:确定由用户按下的按钮(针对鼠标和其它输入设备)。左边是0,中间是1,和右是2
ctrlKey, altKey, shiftKey:判断按下的哪个按钮
hwTimestamp
relatedTarget:返回当前事件连接的元素
isPrimary:在多点触摸场景中最基本的
width, height:触摸点的接触宽度和高度
pressure:压力
rotation:旋转
Pointer事件可以直接添加在元素上,可以直接响应事件,各有各的用处吧,也可以结合起来使用。