jquery觸摸導航

下面的代碼添加了Android/iPad等觸摸導航。它將滑動導航添加到幻燈片縮略圖。這項功能非常出色，但縮略圖無法通過觸摸在平板電腦上進行點擊。您可以點擊他們在PC和滑塊會更改爲相應的幻燈片......不是在平板電腦上，它彷彿觸摸或「點擊」不執行任何操作（刷卡正常工作）jquery觸摸導航

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; 
      } 
     }); 
} 

});

來源

2012-02-21 Blainer

我想這是因爲懸停事件 - 如果你對數字標籤快速點擊兩次（可能需要多次刺戳抓住它！）在iPad上它確實成功地導航到圖片。

不能說話的機器人，但我注意到，iPad確實做懸停效果的第一次點擊，所以它可能是值得只看通過腳本的圖像滑塊，找出它掛鉤哪些鼠標事件（鼠標懸停，懸停等），並在檢測到平板電腦的情況下將其解除綁定。

來源

2012-04-23 11:35:45 aaronrhodes

event.preventDefault()方法停止發生元素的默認操作。

但你只是刪除兩個動作：

e.preventDefault();

來源

2012-12-12 08:51:48 vinhquach

jquery觸摸導航

回答

相關問題