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