简体   繁体   English

JavaScript-用两个或多个手指滚动

[英]JavaScript - Scroll with two or more fingers

I'm working on a Web App with touch support. 我正在开发具有触摸支持的Web应用程序。 On IOS I use the "gesturestart" and the "gesturechange" event for touch gesture recognition. 在IOS上,我将“ gesturestart”和“ gesturechange”事件用于触摸手势识别。 But I cant find any documentation for this events. 但是我找不到有关此事件的任何文档。 Does anyone know if there is any event for scrolling with two or more fingers? 有谁知道是否有任何事件可以用两个或更多个手指滚动?

How I did it: 我是怎么做到的:

To achieve this without using third party frameworks, Use the event.pointers property to know how many fingers or pointers are being used: I put it in GestureChange in case someone adds a third finger after starting. 要在使用第三方框架的情况下实现此目的,请使用event.pointers属性来了解正在使用的手指或指针的数量:我将其放在GestureChange中,以防有人在启动后添加了第三只手指。

Note: Some sites also show a event.touches array, that might be what is required for fingers not mouses 注意:某些站点还显示event.touches数组,这可能是手指而不是鼠标所需的数组

The code: 编码:

dom.addEventListener("gesturechange", gestureChange, false);

function gestureChange(e) {
    // use the .length to count the amount of event.pointers
    if(e.pointers.length >= 2){
       // scroll with 2 or more
    }
}

Notes: 笔记:

The event object returned on gestureChange should look like this: (I used a mouse to generate this so only one touch event and not fingers!) 在gestureChange上返回的事件对象应如下所示:(我使用鼠标来生成该对象,因此只有一个触摸事件而不是手指!)

Object { 
   pointers: Array[1], 
   changedPointers: Array[1],
   pointerType: "mouse",
   srcEvent: mousemove,
   isFirst: false,
   isFinal: false,
   eventType: 2,
   center: {x: 1211, y: 332},
   timeStamp: 1435678852765, 
   deltaTime: 22,
   angle:-11.003540851749504 
... more
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM