對於移動端的觸摸事件,咱們經過touchstart、touchmove、touchend實現,PC端通常使用mousedown、mousemove、mouseup實現。jquery
咱們獲取事件座標,原生js獲取方式this
mousedown | event.pageX |
mousemove | event.pageX |
mouseup | event.pageX |
touchstart | event.touches[0].pageX & event.changedTouches[0].pageX & event.targetTouches[0].pageX |
touchmove | event.touches[0].pageX & event.changedTouches[0].pageX & event.targetTouches[0].pageX |
touchend | event.touches[0].pageX & event.changedTouches[0].pageX & event.targetTouches[0].pageX |
jQuery獲取方式spa
mousedown | event.pageX |
mousemove | event.pageX |
mouseup | event.pageX |
touchstart | event.originalEvent.touches[0].pageX & event.originalEvent.changedTouches[0].pageX & event.originalEvent.targetTouches[0].pageX |
touchmove | event.originalEvent.touches[0].pageX & event.originalEvent.changedTouches[0].pageX & event.originalEvent.targetTouches[0].pageX |
touchend | event.originalEvent.changedTouches[0].pageX & event.originalEvent.targetTouches[0].pageX |
其中關於touch觸摸事件的觸摸列表:.net
touches :當前位於屏幕上的全部手指的一個列表。
targetTouches :位於當前DOM元素上的手指的一個列表。
changedTouches :涉及當前事件的手指的一個列表。code
對於jQuery中在移動端獲取座標使用的event.originalEvent,有如下:blog
It's also important to note that the event object contains a property called originalEvent
, which is the event object that the browser itself created. jQuery wraps this native event object with some useful methods and properties, but in some instances, you'll need to access the original event via event.originalEvent
for instance. This is especially useful for touch events on mobile devices and tablets.事件
event.originalEvent
is usually just the native event
(also described here).ci
However, if the browser is compatible, and the event was a touch event
then that API will be exposed through event.originalEvent
.get
The short answer is that event.originalEvent
is not always the same, it depends on which event type triggered the handler, and on the environment of the browser.it
關於event.originalEvent說明的地址連接:http://stackoverflow.com/questions/16674963/event-originalevent-jquery
關於touch事件的補充內容地址連接:http://blog.csdn.net/clh604/article/details/9861411