Internet Explorerおよびその他のブラウザーでのスワイプジェスチャー

Microsoftは、Internet Explorerブラウザーの継続的な改善、主要なWeb標準の拡張、最新機能の追加に取り組んでいます。 バージョンIE10から、ジェスチャーが登場しました。 おそらく、iOSまたはAndroidのブラウザーでのタッチナビゲーションに既に精通しているのは、タッチイベントをサポートするデバイスが増えているためです。 現在、スマートフォンとタブレットだけでなく、デスクトップコンピューターにもこの機能があります。



バナー、ギャラリー、または回転ブロックを備えたアダプティブWebサイトを作成するときは、クライアント側で、ユーザーのデバイスで許可されている場合、後方矢印だけでなくジェスチャでも適切な場所にすばやくスクロールする機能をサポートするのが良い方法です。



この記事では、jqueryプラグインについて説明します。これにより、使い慣れたtouchstart



touchmove



とtouchmove



をMicrosoftのカスタムビジョンと組み合わせることができます。



プラグインは後で説明しますが、「戻る」および「進む」スワイプジェスチャを理解し、コードのメインアクションが表示されるいくつかの比較ブロックの形式で表示されます。 全体をダウンロードして、動作を確認できます。 下のリンク。



開始するには、Internet Explorerが機能するために、2つのことを行う必要があります。

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 #swipe { -ms-touch-action: none; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初のポイントは、 X-UA-Compatible



メタタグがIE8 +ブラウザーでのページの表示モードを制御することです。

2番目のポイント-感覚的相互作用の標準処理を完全に無効にし、すべてのポインターイベントをJavaScriptコードにリダイレクトします。



タッチジェスチャを理解するデバイスでIEブラウザーを扱っていることを理解するために、条件で使用する変数を設定します。

 var IE = window.navigator.msPointerEnabled;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、実際には、イベントの課題はどのようなものか。

 var touchElem = document.getElementById('swipe'); if (IE && window.MSGesture) { //events for IE var eventStart = "MSGestureStart", eventMove = "MSGestureChange"; var msGesture = new MSGesture(); msGesture.target = touchElem; touchElem.addEventListener('MSPointerDown', function(event) { msGesture.addPointer(event.pointerId); }); } else { //events for other browsers var eventStart = "touchstart", eventMove = "touchmove"; } touchElem.addEventListener(eventStart, function (e) { swipe.init(e, eventMove); }, false);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さらに、非IEのswipe.init



メソッドでは、タッチイベントの開始座標を記憶し、すべてのブラウザーでswipe.onTouchMove



メソッドに移動します

 if(!IE) { if (e.pageX || e.targetTouches[0].pageX) { swipe.variable.startX = e.pageX || e.targetTouches[0].pageX; } } touchElem.addEventListener(eventMove, swipe.onTouchMove, false);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

swipe.onTouchMove



内では、ブラウザーのswipe.onTouchMove



も発生します。

 if(IE) { if (e.detail == e.MSGESTURE_FLAG_INERTIA) return; swipe.variable.translationX += e.translationX; } else { var newX = e.pageX || e.targetTouches[0].pageX; swipe.variable.translationX = newX - swipe.variable.startX; } if (Math.abs(swipe.variable.translationX) > 10) { swipe.switchDirection(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、数字の10



は、画面上のジェスチャーの時点で発生したピクセル単位のオフセットです。 任意に設定できます。 タッチに対する反応の感度は、その値に依存します。

さらに、 switchDirection



の値swipe.variable.translationX



正の場合、 swiperight



イベントがswiperight



、負の場合、次にswipeleft



、ジェスチャーの方向はswitchDirection



関数で決定されます。

ユーザーが自分のアクションに期待していることが明らかになった後、対応する機能が実行されます。これは、単純な矢印「戻る」または「進む」をクリックしたときに機能するものと同じです。



GestureSwipeプラグインは、次のように呼び出されます。

 $('#swipe').gestureSwipe('event', eventHandler);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

event



をswipeleft



またはswiperight



できるswiperight







Microsoftの公式ドキュメント 。



完全な実例はここにあります 。