HTML5里的手势 *** 作是如何实现的呢?

举例说明：

通过一句addEventListener 就能够知道当前用户的点击是哪种设备，是手指的点击，是鼠标的单击还是触控笔的点击（平板设备都会带有触控笔）：

<canvas id="MyCanvas"></canvas>

<script>

MyCanvas.addEventListener("MSPointerDown", MyBack, false)

function MyBack(e) {

alert(e.pointerType.toString())

}

</script>

通过回调的方法中 e.pointerType 还进行判断。

鼠标是4，触控笔是3，手指是2。

至于值为1是何种设备还有待研究。

还有需要注意的就是 想在javascript中添加对输入设备的识别，注册的方法事件也是有点点区别。

addEventListener 添加的事件为 MSPointerDown

而在IE10中对于这样的多种设备识别中优先处理的手指的点击，前提是不影响功能正常单击的情况下，然而IE10不仅仅能识别用户的输入设备还支持非常多的高级手势。

用html实现scroll-view如下，自从iphone上的mail应用有了这种加载的手势之后，很多本地应用都默默的采用了这种方式，首先第一轮尝试我们想用浏览器原生的滚动区域(overflow：auto，-webkit-overflow-scrolling：touch)来模拟这种效果。

实际上,拿canvas2D绘制,只是把image渲染到 canvas(画布上).而实际的事件,就不能像标签那么处理,应该对canvas的事件做处理.

实现逻辑是这样:

1,添加事件监听,比如说,鼠标按下 做什么,滑动 做什么,d起做什么.一般鼠标事件都是判断d起的位置

2,判断有效坐标,在事件中判断坐标位置是否在图片位置,也就是图片在canvas的位置.

ex:

//some code...

canvas.width=400

canvas.height=400

var context2d = canvas.getContext("2d")

var img =new Image()

img.src="xxx/xxx.png"

img.onload=function(){

context2d.drawImage(img,X,Y,WIDTH,HEIGTH)

//X=0,Y=0,W=50,H=50

canvas.addEventListener("mouseup", keyUp, false)

}

function keyUp(evt){

Event_UpX = evt.offsetX

Event_UpY = evt.offsetY

if(Event_UpX>=绘制坐标X&&Event_UpX<=图片宽度){

if(Event_UpY>=绘制坐标Y&&Event_UpY<=图片高度){

//do something

}

}

}

---