jQuery工具可滚动触摸触发器答案

【问题标题】：jQuery tools scrollable touch triggerjQuery工具可滚动触摸触发器
【发布时间】：2012-06-12 10:51:46
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

// 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"]();
}

【讨论】：