zoukankan      html  css  js  c++  java
  • 移动端 touch 事件的originalEvent Chris

      对于移动端的触摸事件,我们通过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

    如需转载请注明出处。
  • 相关阅读:
    go 字符串转换
    GRU模型结构
    ElasticSearch实战系列八: Filebeat快速入门和使用---图文详解
    H5可视化编辑器(H5 Dooring)
    (转)如何防止Axios对我的请求参数进行编码?
    vue使用element-ui,如何给Label加标签
    vue中$router.push打开新窗口
    (转)webstorm配置svn
    打开gitee.com网站报错
    监控$route无效
  • 原文地址:https://www.cnblogs.com/dongcanliang/p/5749270.html
Copyright © 2011-2022 走看看