javascript - jquery 触摸导航

Question

下面的代码为 android/ipads 等添加了触摸导航。它为幻灯片缩略图添加了滑动导航。这一切都很好，但缩略图无法通过触摸在平板电脑上点击。您可以在 PC 上单击它们， slider 将更改为适当的幻灯片...而不是在平板电脑上，就好像触摸或“单击”没有任何作用(滑动工作正常)

JS fiddle

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

JS

$('#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;
            }
        });
}

});​

Answer 1

我认为这是因为悬停事件 - 如果您在 iPad 上快速点击数字选项卡两次(可能需要多次戳才能捕捉到它!)，它会成功导航到图像。

不能代表 android，但我注意到 iPad 确实会在第一次点击时产生悬停效果，因此可能值得查看图像 slider 的脚本，找出它连接到哪些鼠标事件(鼠标悬停，悬停等)并在检测到平板电脑的 scipt 末尾解除绑定(bind)。