jquery 触摸导航答案

【问题标题】：jquery touch navigationjquery 触摸导航
【发布时间】：2012-02-21 16:09:05
【问题描述】：

下面的代码为 android/ipad 等添加了触摸导航。它为幻灯片缩略图添加了滑动导航。这很好用，但不能通过触摸在平板电脑上点击缩略图。您可以在 PC 上单击它们，滑块将更改为相应的幻灯片...而不是在平板电脑上，就好像触摸或“单击”没有任何作用（滑动工作正常）

JS 小提琴

http://jsfiddle.net/Mottie/VM8XG/5165/

$('#slider').anythingSlider({

navigationSize : 3,

// Callback when the plugin finished initializing
onInitialized: function(e, slider) {

    var time = 1000, // allow movement if < 1000 ms (1 sec)
        range = 50,  // swipe movement of 50 pixels triggers the slider
        x = 0, t = 0, touch = "ontouchend" in document,
        st = (touch) ? 'touchstart' : 'mousedown',
        mv = (touch) ? 'touchmove' : 'mousemove',
        en = (touch) ? 'touchend' : 'mouseup';

    slider.$window.add( slider.$controls )
        .bind(st, function(e){
            // prevent image drag (Firefox)
            e.preventDefault();
            t = (new Date()).getTime();
            x = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX; 
        })
        .bind(en, function(e){
            t = 0; x = 0;
        })
        .bind(mv, function(e){
            e.preventDefault();
            var newx = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
            r = (x === 0) ? 0 : Math.abs(newx - x),
            // allow if movement < 1 sec
            ct = (new Date()).getTime();
            if (t !== 0 && ct - t < time && r > range) {
                if (newx < x) { 
                    if ($(this).hasClass('anythingControls')) {
                        slider.$controls.find('.next').trigger('click');
                    } else {
                        slider.goForward();
                    }
                    return false;
                }
                if (newx > x) {
                    if ($(this).hasClass('anythingControls')) {
                        slider.$controls.find('.prev').trigger('click');
                    } else {
                        slider.goBack(); 
                    }
                }
                t = 0; x = 0;
                return false;
            }
        });
}

});

【问题讨论】：

标签： javascript jquery html mobile

【解决方案1】：

我认为这是因为悬停事件 - 如果您在 iPad 上快速点击两次数字标签（可能需要多次戳记才能捕捉到它！）它确实会成功导航到图像。

不能代表 android，但我注意到 iPad 确实在第一次单击时会产生悬停效果，因此只需查看图像滑块的脚本，找出它正在挂钩的鼠标事件（mouseover ，悬停等）并在检测到平板电脑的 scipt 末尾解除绑定。

【讨论】：

【解决方案2】：

event.preventDefault() 方法阻止元素的默认操作发生。

但是您刚刚删除了两个操作：

e.preventDefault();

【讨论】：