和其他的平板,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事件可以直接添加在元素上,可以直接響應事件,各有各的用處吧,也可以結合起來使用。