对触摸的Java脚本支持不阻止浏览器捏支持 [英] Javascript support for touch without blocking browsers pinch support

问题描述

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

I have a little web gallery that I added swipe navigation to for mobile browsers. I did it with pretty simple touchstart/touchmove/touchend event tracking.

问题是，当我尝试在浏览器窗口中进行缩放时，如果在我添加了触摸事件处理程序的元素中有任何手指开始操作，它将失败，我猜想是对preventDefault的调用.

The problem is that when I try to pinch zoom in the browser window it fails if any finger starts in the element I added the touch event handlers to, I'm guessing from the calls to preventDefault.

是否可以在不阻止浏览器放大和缩小功能的情况下跟踪用于浏览图像的触摸事件?如果介面在我的元素上，我不介意阻止单指滚动，但我想允许捏缩放.

Is there a way I can track the touch events for navigating my images without blocking the zoom in and out feature of the browser? I don't mind blocking single finger scrolling if it's over my element, but I want to allow the pinch zooming.

代码如下:

  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
            }
        }
    });
 }

推荐答案

我希望它可以在Android上使用，所以我不想使用手势事件，虽然我没有android，但我只在iOS上阅读过它测试该声明.

I wanted this to work on Android so I didn't want to use gesture events, which I have read are only on iOS - though I have no android to test that claim.

然后，我看了一堆JavaScript手势库，这些库试图简化手势支持.不幸的是，它们都不足以达到我的目的.

I then looked at a bunch of javascript gesture libraries which try to make gesture support easy. Unfortunately none of them worked well enough for my purposes.

因此，我最终使用身体上的触摸处理程序来跟踪页面上的所有触摸，然后使用自定义试探法来确定是使用触摸来浏览画廊还是使用它来滚动/捏住页面.

So I ended up using touch handlers on the body to track all the touches on the page and then a custom heuristic to determine whether to use the touch to navigate the gallery or to use it to scroll/pinch the page.

它仍然不是完美的.如果您先触摸我的图库元素，然后再触摸其外部，则捏不起作用.

It's still not perfect. If you start by touching my gallery element and then touching outside it the pinch doesn't work.

顺便说一句，"TouchSwipe" jquery库具有一个设计得非常好且灵活的API，但是有了我需要的配置，仅跟踪我的元素上的水平滑动，在iOS6下它太古怪了，并且没有更新几个星期.如果您正在研究这种挑战，并且距现在还有几个月，我建议您检查该插件的更新.

As an aside, the "TouchSwipe" jquery library has an incredibly well-designed and flexible API, but with the configuration I needed, tracking only horizontal swipes on my element, it was too quirky under iOS6 and hasn't been updated for a few weeks. If you are looking into this sort of challenge and it's a few months from now I'd recommend checking the updates for that plugin.

这篇关于对触摸的Java脚本支持不阻止浏览器捏支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！