移動端 touch 事件的originalEvent


  對於移動端的觸摸事件,我們通過touchstart、touchmove、touchend實現,PC端一般使用mousedown、mousemove、mouseup實現。

  我們獲取事件坐標,原生js獲取方式

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獲取方式

 

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觸摸事件的觸摸列表:

    touches :當前位於屏幕上的所有手指的一個列表。
    targetTouches :位於當前DOM元素上的手指的一個列表。
    changedTouches :涉及當前事件的手指的一個列表。

 

  對於jQuery中在移動端獲取坐標使用的event.originalEvent,有以下:

 

  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).

  However, if the browser is compatible, and the event was a touch event then that API will be exposed through event.originalEvent.

  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.

 

 

  關於event.originalEvent說明的地址鏈接:http://stackoverflow.com/questions/16674963/event-originalevent-jquery

  關於touch事件的補充內容地址鏈接:http://blog.csdn.net/clh604/article/details/9861411

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM