js触摸事件

touch事件的绑定

电脑端的mouseDown，mouseUp，mouseMove分别对应移动端的touchstart，touchend，touchmove

下面的代码判断浏览器是电脑端还是移动端，如果是电脑端，就绑定鼠标事件；如果是移动端，就绑定触摸事件。
需要注意的是，绑定触摸事件的时候需要通过addEventListener方式

    function bindEventListenerAccordingPlatform() {
        if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
            $("#board").addEventListener("touchstart", onBlockMouseDown)
            $("#board").addEventListener("touchend", onBlockMouseUp)
            $("#board").addEventListener("touchmove", onBlockMouseMove)
        } else {
            $("#board").onmousedown = onBlockMouseDown
            $("#board").onmouseup = onBlockMouseUp
            $("#board").onmousemove = onBlockMouseMove
        }
    }

以上绑定的三个函数onBlockMouseDown，onBlockMouseUp，onBlockMouseMove中可能会需要获取鼠标位置或者触点位置，可以通过如下函数实现

    /**根据事件获取坐标，兼容鼠标和触摸两种事件*/
    function getMousePosition(event) { 
        if (event.type.startsWith("mouse")) {
            return {x: event.x, y: event.y}
        } else if (event.type.startsWith("touch")) {
            return {
                x: event.changedTouches[0].clientX,
                y: event.changedTouches[0].clientY
            }
        } else {
            console.log("baga==========")
        }
    }

TouchEvent有三个touches

在Chrome上，TouchEvent包含如下属性

TouchEvent {isTrusted: true, touches: TouchList, targetTouches: TouchList, changedTouches: TouchList, altKey: false, …}
altKey:false
bubbles:true
cancelBubble:false
cancelable:true
changedTouches:TouchList {0: Touch, length: 1}
composed:true
ctrlKey:false
currentTarget:null
defaultPrevented:true
detail:0
eventPhase:0
isTrusted:true
metaKey:false
path:(9) [div#block32.block, div#board, div#container, body, shadow, document-fragment, html, document, Window]
returnValue:false
shiftKey:false
sourceCapabilities:InputDeviceCapabilities {firesTouchEvents: true}
srcElement:div#block32.block
target:div#block32.block
targetTouches:TouchList {0: Touch, length: 1}
timeStamp:1476.3200000000002
touches:TouchList {0: Touch, length: 1}
type:"touchmove"
view:Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
which:0

• touches: 当前屏幕上所有触摸点的列表;
• targetTouches: 当前对象上所有触摸点的列表;
• changedTouches: 涉及当前(引发)事件的触摸点的列表

通过一个例子来区分一下触摸事件中的这三个属性：

1、用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。
2、用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点为一个值。当两个手指触摸相同元素时，targetTouches和touches的值相同，否则targetTouches 只有一个值。changedTouches此时只有一个值，
为第二个手指的触摸点，因为第二个手指是引发事件的原因
3、用两个手指同时接触屏幕，此时changedTouches有两个值，每一个手指的触摸点都有一个值
4、手指滑动时，三个值都会发生变化
5、一个手指离开屏幕，touches和targetTouches中对应的元素会同时移除，而changedTouches仍然会存在元素。
6、手指都离开屏幕之后，touches和targetTouches中将不会再有值，changedTouches还会有一个值，
此值为最后一个离开屏幕的手指的接触点。

触点坐标选取

在Chrome上，Touch对象包含如下属性：

Touch
clientX:326.6669921875
clientY:415.5559997558594
force:1
identifier:0
pageX:326.6669921875
pageY:415.5559997558594
radiusX:25.55555534362793
radiusY:25.55555534362793
rotationAngle:0
screenX:737
screenY:317
target:div#block32.block

坐标有三种：
pageX，pageY：相对于整个document
clientX，clientY：相对于窗口的客户区
screenX,screenY：相对于整个屏幕

使用时： e.targetTouches[0].pageX 或 (jquery)e.originalEvent.targetTouches[0].pageX
e.changedTouches[0].pageX 或 (jquery)e.originalEvent.changedTouches[0].pageX

参考资料

http://blog.sina.com.cn/s/blog_468530a60102wzkw.html