Question

我必须为我的网页做一些特殊的事情才能以正确的方式在Android上工作。显示一些图像（一个可见，另一个不可见），通过滑动应该可以更改它们。到目前为止在所有操作系统上都没有问题。

但它也应该可以缩放。现在Android开始变成Buggy了。由于滑动回调，它会停止缩放手势。回调本身不会更改页面，因为视图已缩放，因此应该没有中断。

现在，当两根手指触摸显示屏时，我可以通过关闭我的滑动和闪光灯来工作，如果手指离开显示屏，则重新开始游览。

在第一次运行时我可以滑动，然后我可以放大而不会中断，但是我不能再滑动了。调用再次设置回调的函数，它设置回调，但它们不会被执行...

以下是代码：

app.utils.scroll = (function(){
var $viewport     = undefined;
var swipeDisabled = false;

var init = function(){
    $viewport = $('#viewport');

    $viewport.mousewheel(mayChangePage);

    // On touchstart with two fingers, remove the swipe listeners.
    $viewport.on('touchstart', function (e) {
        if (e.originalEvent.touches.length > 1) {
            removeSwipe();
            swipeDisabled = true;
        }
    });

    // On touchend, re-define the swipe listeners, if they where removed through two-finger-gesture.
    $viewport.on('touchend', function (e) {
        if (swipeDisabled === true) {
            swipeDisabled = false;
            initSwipe();
        }
    });

    initSwipe();
}
var mayChangePage = function(e){
    // If page is not zoomed, change page (next or prev).
    if (app.utils.zoom.isZoomed() === false) {
        if (e.deltaY > 0) {
            app.utils.pagination.prev(e);
        } else {
            app.utils.pagination.next(e);
        }
    }

    // Stop scrolling page through mouse wheel.
    e.preventDefault();
    e.stopPropagation();
};
var next = function (e) {
    // If page is not zoomed, switch to next page.
    if (app.utils.zoom.isZoomed() === false) {
        app.utils.pagination.next(e);
    }
};
var prev = function (e) {
    // If page is not zoomed, switch to prev page.
    if (app.utils.zoom.isZoomed() === false) {
        app.utils.pagination.prev(e);
    }
};
var initSwipe = function () {
    // Listen to swipeleft / swiperight-Event to change page.
    $viewport.on('swipeleft.next', next);
    $viewport.on('swiperight.prev', prev);
};
var removeSwipe = function () {
    // Remove listen to swipeleft / swiperight-Event for changing page to prevent android-bug.
    $viewport.off('swipeleft.next');
    $viewport.off('swiperight.prev');
};

$(document).ready(init);
}());

Pastebin

我有什么想法可以让事件重新开始？

感谢所有想法。

此致 lippoliv

Answer 1

修正了它：

jQuery Mobile本身prevents the swipe Event如果处理程序已注册，则杀死＆＃34;滚动＆＃34;。

所以我覆盖了$.event.special.swipe.scrollSupressionThreshold值并将其设置为10000，以防止jQueryMobile的preventDefault-call：

$.event.special.swipe.scrollSupressionThreshold = 10000;

现在我的代码看起来像

app.utils.scroll = (function(){
var $viewport     = undefined;
var swipeDisabled = false;

var init = function(){
    $viewport = $('#viewport');

    $viewport.mousewheel(mayChangePage);

    // See #23.
    $.event.special.swipe.scrollSupressionThreshold = 10000;

    // Listen to swipeleft / swiperight-Event to change page.
    $viewport.on('swipeleft.next', next);
    $viewport.on('swiperight.prev', prev);
}
var mayChangePage = function(e){
    // If page is not zoomed, change page (next or prev).
    if (app.utils.zoom.isZoomed() === false) {
        if (e.deltaY > 0) {
            app.utils.pagination.prev(e);
        } else {
            app.utils.pagination.next(e);
        }
    }

    // Stop scrolling page through mouse wheel.
    e.preventDefault();
    e.stopPropagation();
};
var next = function (e) {
    // If page is not zoomed, switch to next page.
    if (app.utils.zoom.isZoomed() === false) {
        app.utils.pagination.next(e);
    }
};
var prev = function (e) {
    // If page is not zoomed, switch to prev page.
    if (app.utils.zoom.isZoomed() === false) {
        app.utils.pagination.prev(e);
    }
};

$(document).ready(init);
}());

感谢Omar-他在jquery IRC中写了几分钟/小时，并提出了一些关于覆盖jQueryMobile标准值的建议。

Android + jQuery - swipeleft上的第二个不会执行

1 个答案: