Jackmooreズーム1.7.15：Jackmooreによってダブルタップズームを使っ

Question

とタッチデバイス上のトグルズーム：http://www.jacklmoore.com/zoom/ https://github.com/jackmoore/zoom

私は、ズーム効果を切り替えるには、タッチデバイス上でダブルタップを使用したいと思います。その理由は、私が使用しているカルーセル（OWL Carousel）も画像にスワイプ機能があり、ズームは画像をタッチしてドラッグすることでタッチデバイスに作用します。これはスワイプと競合します。 TOPMANサイトと同様に

は、モバイル用に行います http://www.topman.com/en/tmuk/product/clothing-140502/mens-blazers-5369753/black-textured-slim-fit-tuxedo-jacket-5390835?bi=0&ps=20

これは、JSファイルへのリンクです：私は、これは非タッチデバイス上でダブルクリックで動作するように取得することができますhttps://github.com/jackmoore/zoom/blob/master/jquery.zoom.js

：

if (settings.on === 'toggle') { 
       $source.on('dblclick.zoom', 
        function (e) { 
         if (clicked) { 
          stop(); 
         } else { 
          start(e); 
         } 
         clicked = !clicked; 
        } 
       ); 

タッチ設定のコードを変更する必要がありますが、私はこの部分を変更すると信じています：

// Touch fallback 
      if (settings.touch) { 
       $source 
        .on('touchstart.zoom', function (e) { 
         e.preventDefault(); 
         if (touched) { 
          touched = false; 
          stop(); 
         } else { 
          touched = true; 
          start(e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]); 
         } 
        }) 
        .on('touchmove.zoom', function (e) { 
         e.preventDefault(); 
         zoom.move(e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]); 
        }) 
        .on('touchend.zoom', function (e) { 
         e.preventDefault(); 
         if (touched) { 
          touched = false; 
          stop(); 
         } 
        }); 
      } 

Touchy：https://github.com/yairEO/touchyのようなものでダブルタップのリスナーを追加してもいいかもしれません。私は今すぐダブルタップを認識させることができたが、ズーム機能を開始しなかった。

Answer 1

自分でダブルタップハンドラを作成できます。タップがどのくらい速く起こったかを追跡するために何かが必要になります。

オンタッチエンドでは、タイムスタンプを保存して保存する必要があり、経過時間とダブルタップと見なしたい場合は、

var stateVar = new Date().getTime(); 
function fnRef(e){ 
    if(new Date().getTime() - stateVar < 300){ 
     e.preventDefault(); 
     // invoke logic here 
    } 
} 

element.addEventListener("touchend", fnRef); 

上記は、コーディングスタイルやケースに合わせて調整する必要がありますが、一般的にはその背後にあるロジックです。

私が比較値として300msを使用している理由は、クリックの振る舞いを防ぎ、その時間にズームを起動する必要があるからです。 300msは、タップイベントがそのターゲットの上をクリックする必要があるときです（タッチ対応環境で使用されるブラウザの通常の動作）