1

我目前正在按照响应式设计+移动优先的方法重新设计网站。

我正在尝试在支持触摸的设备上使用 JS 检测滑动事件。为此,我使用以下代码:

document.addEventListener ('touchstart', function(event) {
    //Get initial finger coords
}, false);

document.addEventListener ('touchmove', function(event) {
    //Update final finger coords
}, false);

document.addEventListener ('touchend', function(event) {
    //Compare initial and final coords, trigger swipe events if necessary
}, false);

我已经在 iPad 1、iPhone 4 和几台运行 Android 2.2.1 的设备上测试了这段代码,当我在屏幕上拖动手指时的结果是我所期望的:touchmove事件触发了几次(它很容易上升做长手势时到一百)。

当我在 Android 2.3.3 设备(我使用的是三星 Galaxy S2)上测试它时,问题就出现了。使用其原生浏览器,touchmove事件数量减少到只有 1 个(或很少 2 个)。

我做错了什么还是应该表现得像那样?有没有人发现同样的问题?touchmove我无法在此版本的 Andriod 中找到有关事件行为的文档。

您可以在这里测试它(使用支持触摸的设备):http: //jsfiddle.net/xs5BG/embedded/result/

4

3 回答 3

2

滚动开始工作后,galaxy S2 似乎没有触发 touchmove。如果您执行 preventDefault 它会按预期触发事件。

于 2012-06-07T19:02:09.640 回答
0

用我的 HTC Desire Z(运行 2.3.3)测试你的 jsFiddle 示例,我得到的不仅仅是一个 touchmove 事件——如所愿。所以我无法重现您使用此设备的实际问题,尽管在相同的 API 级别:( 有趣的是,您的代码还显示了我在当前项目中遇到的问题:第一个 touchmove 事件似乎有某种阈值:

放下手指并且只移动一点点就会产生 0 个 touchmove 事件……一旦超过阈值,它将以毫秒为间隔触发 touchmove 事件,因为它会识别移动的每个像素距离(就像它应该做的那样)。也许这可能与您的现象有关,您是否也在您的 2.3.3 设备上看到了这一点?

于 2012-05-28T13:53:37.873 回答
0

在许多 Android 版本上,如果您在 touchstart 上不阻止默认设置,Android 设备将进入默认滚动模式并停止向 webview 发送触摸事件。所以你需要

document.addEventListener ('touchstart', function(event) {
    event.preventDefault();
}, false); 

现在所有的触摸事件都将触发,但默认滚动将被禁用。

有一个垫片可以克服这个问题,它模拟滑动手势https://github.com/TNT-RoX/android-swipe-shim

于 2014-08-06T08:20:54.683 回答