Question

我有一个小网页库，我为移动浏览器添加了滑动导航功能。我用非常简单的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
            }
        }
    });
 }

Answer 1

你想要的是ongesturestart，ongesturestart移动和结束工作与触摸相同，但不止一个手指。从他们可以添加一个监听器：

event.stopPropagation();

防止“preventDefault（）”传入。

Answer 2

我希望这可以在Android上工作，所以我不想使用手势事件，我已经阅读过仅在iOS上 - 虽然我没有用于测试该声明的安卓。

然后我看了一堆javascript手势库，试图让手势支持变得容易。不幸的是，它们都不能很好地用于我的目的。

所以我最终在身体上使用触摸处理程序来跟踪页面上的所有触摸，然后使用自定义启发式来确定是使用触摸来浏览图库还是使用它来滚动/捏合页面。

它仍然不完美。如果你首先触摸我的gallery元素，然后触摸它，那么捏不起作用。

顺便说一下，“TouchSwipe”jquery库有一个设计精良且灵活的API，但是我需要的配置，只跟踪我的元素上的水平滑动，它在iOS6下太古怪而且还没有更新几个星期。如果您正在研究这种挑战，并且从现在开始几个月后，我建议您检查该插件的更新。

Javascript支持触摸而不会阻止浏览器捏合支持

2 个答案: