2012-02-21 14 views
2

以下のコードは、アンドロイド/ ipadsなどのタッチ操作を追加します。スライドのサムネイルにスワイプナビゲーションを追加します。これは素晴らしく、すべて機能しますが、サムネイルはタッチでタブレットでクリックできません。あなたは、PC上でそれらをクリックするとスライダーではなく、タブレットに...適切なスライドに変更されますその感動や「クリック」は何も(スワイプが正常に動作しない)んjquery touch navigation

JSフィドル

かのように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; 
      } 
     }); 
} 

});​ 

答えて

0

私はそれが原因でホバーイベントのだと思う - あなたはそれが正常に移動しないiPadで(!それをキャッチするために、複数のジャブが必要な場合があります)を2回素早く数のタブをタップした場合画像。

アンドロイドは話すことができませんが、iPadが最初のクリックでホバー効果を行うことに気づいたので、画像スライダーのスクリプトを見て、どのマウスイベントに接続しているか調べる価値がありますマウスオーバー、ホバーなど)、タブレットが検出されたあなたのsciptの最後にそれらをアンバインドします。

0

event.preventDefault()メソッドは、要素のデフォルト動作を停止します。

しかし、あなたはちょうど2つのアクションを削除:

e.preventDefault();