1

我有一个小网络画廊，我为移动浏览器添加了滑动导航。我通过非常简单的 touchstart/touchmove/touchend 事件跟踪来做到这一点。

问题是，当我尝试在浏览器窗口中捏缩放时，如果任何手指从我添加了触摸事件处理程序的元素中开始，它就会失败，我从对 preventDefault 的调用中猜测。

有没有一种方法可以在不阻止浏览器放大和缩小功能的情况下跟踪用于导航图像的触摸事件？如果它在我的元素上方，我不介意阻止单指滚动，但我想允许捏缩放。

这是代码：

  function addDragHandlers(eventDivId) {
    var startX, endX;
    var slides = $('#'+eventDivId);

    slides.bind('touchstart', function(e) {
        e.preventDefault();
        startX = e.pageX;
        endX = startX;
    });

    slides.bind('touchmove', function(e) {
        e.preventDefault();
        endX = e.pageX;
    });

    slides.bind('touchend', function(e) {
            e.preventDefault();
            if ( endX - startX < 0) {
                // go to next image
            } else if ( endX - startX > 0) {
                // go to previous image
            } else {
                // do click action
            }
        }
    });
 }
4

2 回答 2

0

您想要的是 ongesturestart，ongesturestart move 和 end 工作与触摸相同，但不止一根手指。您可以从他们那里添加一个监听器：

event.stopPropagation();

防止“preventDefault()”传播进来。

于 2013-05-17T20:38:24.240 回答
0

我希望它可以在 Android 上运行，所以我不想使用手势事件，我已经阅读过仅在 iOS 上 - 尽管我没有 android 来测试该声明。

然后我查看了一堆 JavaScript 手势库，它们试图让手势支持变得容易。不幸的是，它们都没有达到我的目的。

所以我最终在 body 上使用触摸处理程序来跟踪页面上的所有触摸，然后使用自定义启发式方法来确定是使用触摸来导航画廊还是使用它来滚动/捏合页面。

它仍然不完美。如果您首先触摸我的画廊元素，然后触摸它的外部，则捏不起作用。

顺便说一句，“TouchSwipe”jquery 库有一个设计精良且灵活的 API，但由于我需要的配置，只跟踪我的元素上的水平滑动，它在 iOS6 下太古怪了，而且已经有一段时间没有更新了周。如果您正在研究这种挑战并且几个月后我建议您检查该插件的更新。

于 2013-06-03T14:52:48.267 回答