ipad - jQuery工具可滚动触摸触发器

Question

我正在使用可滚动的 Jquery 工具为 iPad 制作基于触摸的幻灯片

http://jquerytools.org/demos/scrollable/vertical.html

它工作得很好，可以做我想做的一切，但是如果我的手指在滑块上的任何地方并且稍微移动它就会触发滑块来改变滑块，有没有办法我可以改变你需要拖动多少手指来改变幻灯片，或设置特定区域，您可以在其中滑动以更改幻灯片？

Answer 1

您禁用对象的“构造函数”上的触摸事件，如下所示：

            root = $('#content').scrollable({
                keyboard:false,
                mousewheel: false,
                touch: false
            });

Answer 2

我需要做类似的事情，因为 Scrollable 在 iPad 上过于敏感。以下是我为使其对水平滑动不那么敏感而进行的更改：

// touch event
if (conf.touch) {
    var touch = {};

    itemWrap[0].ontouchstart = function(e) {
        var t = e.touches[0];
        touch.x = t.clientX;
        touch.y = t.clientY;
    };

    itemWrap[0].ontouchmove = function(e) {

        // only deal with one finger
        if (e.touches.length == 1 && !itemWrap.is(":animated")) {           
            var t = e.touches[0],
                 deltaX = touch.x - t.clientX,
                 deltaY = touch.y - t.clientY;
            self[vertical && deltaY > 0 || !vertical && deltaX > 0 ? 'next' : 'prev']();                
            e.preventDefault();
        }
    };
}

变成

// touch event
if (conf.touch) {
    var touch = {};

    itemWrap[0].ontouchstart = function(e) {
        var t = e.touches[0];
        touch.x = t.clientX;
        touch.y = t.clientY;
    };

    itemWrap[0].ontouchmove = function(e) {

        // only deal with one finger
        if (e.touches.length == 1 && !itemWrap.is(":animated")) {           
            var t = e.touches[0],
                 deltaX = touch.x - t.clientX,
                 deltaY = touch.y - t.clientY;
            if(deltaX > 200 || deltaX < -200) { // new line
                self[vertical && deltaY > 0 || !vertical && deltaX > 0 ? 'next' : 'prev']();    
            } // new line
            e.preventDefault();
        }
    };
}

将 200 调整到您希望人们在切换到下一张幻灯片之前必须拖动手指的距离。同样，如果要控制垂直滚动条，请将新代码中的 deltaX 更改为 deltaY：

if(deltaY > 200 || deltaY < -200) { // new line
  self[vertical && deltaY > 0 || !vertical && deltaX > 0 ? 'next' : 'prev']();    
} // new line

如果您正在使用 jQuery 工具的最小化版本，您可以使用以下代码：

// horizontal change
if(h > 200 || h < -200) {
  b[j && d > 0 || !j && h > 0 ? "next" : "prev"]();
}

// vertical change
if(d > 200 || d < -200) {
  b[j && d > 0 || !j && h > 0 ? "next" : "prev"]();
}