BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

HTML5 のタッチ イベント（touchstart、touchmove、touchend）の実装

2022-01-27 12:53:46

HTML5で追加された新しいイベントはたくさんありますが、互換性が理想的でないため、あまり応用が効かないので、ここでは基本的に省略し、広く使われているイベントのうち互換性のあるものだけを共有し、後日、互換性の状況が良くなれば、順次追加していく予定です。今日紹介するイベントは主にタッチイベントで、touchstart、touchmove、touchendです。

タッチ イベント touchstart、touchmove、touchend は、開発者に何らかの情報を伝えるために iOS 版 Safari に追加されたものです。iOsデバイスにはマウスもキーボードもないため、モバイルSafariブラウザ向けにインタラクティブなWebページを開発する場合、PC側のマウスやキーボードのイベントだけでは十分ではありません。

iPhone 3Gsが発売されたとき、独自のモバイルSafariブラウザーは、タッチ（触覚）操作に関連するいくつかの新しいイベントを提供しました。その後、Androidのブラウザでも同様のイベントが実装されました。タッチイベント（touch）は、ユーザーの指が画面に置かれたとき、画面上でスワイプされたとき、画面から遠ざかったときに出発します。以下はその指定です。

  • touchstartイベント：指が画面に触れたときに発生し、すでに指が画面上にある場合でも発生します。
  • touchmoveイベント：画面上で指がスワイプされたときに連続して発生する。このイベント中にpreventDefault()イベントを呼び出すと、スクロールができなくなる。
  • touchendイベント：指が画面から離れたときに発生する。
  • touchcancelイベント: システムがタッチの追跡を停止したときに発生します。このイベントの正確な出発時間はドキュメントに明記されていないため、推測する必要があります。

上記のイベントはすべてバブルで、キャンセルすることができます。これらのタッチイベントは DOM 仕様で定義されているわけではありませんが、DOM 互換の方法で実装されています。そのため、各タッチイベントのイベントオブジェクトは、マウスの実務でよく使われるプロパティを提供しています。bubbles（バブリングイベントの種類）、cancelable（イベントに関連付けられたデフォルトアクションをpreventDefault()メソッドでキャンセルできるか）、clientX（イベントがトリガーされたときのマウスポインタの水平座標を返す）、clientY（イベントがトリガーされたときのマウスポインタの水平座標を返す）。およびclientY（イベントがトリガーされたときのマウスポインタの垂直座標を返す）、screenX（イベントがトリガーされたときのマウスポインタの水平座標）、およびscreenY（イベントがトリガーされたときのマウスポインタの垂直座標を返す）である。タッチイベントには、通常のDOMプロパティに加え、タッチをトラッキングするための以下の3つのプロパティが含まれています。

  • touches: 現在追跡しているタッチ操作を表すタッチ オブジェクトの配列。
  • targetTouches: イベントターゲットに固有のTouchオブジェクトの配列。
  • changeTouches: 最後のタッチから何が変更されたかを示すTouchオブジェクトの配列。

各Touchオブジェクトは以下のプロパティを含みます。

  • clientX: ビューポートにおけるタッチターゲットのx座標。
  • clientY: ビューポートでのタッチターゲットのY座標。
  • identifier: タッチパネルを識別するユニークなID。
  • pageX: ページ内のタッチターゲットのx座標。
  • pageY: ページ上のタッチターゲットのy座標。
  • screenX: 画面上でのタッチターゲットのx座標。
  • screenY: 画面上のタッチターゲットのy座標。
  • target: タッチターゲットのDOMノードターゲット。

上記の属性は、こうして見ているだけでも実に面倒なもので、それぞれの属性は非常に細かいので、その微妙なところをよりよく理解するには、ちょっとした実例を用意するしかありません。そこで、ちょっとした例をご紹介しましょう。 

function load (){ 
    
    document.addEventListener('touchstart',touch, false); 
    document.addEventListener('touchmove',touch, false); 
    document.addEventListener('touchend',touch, false); 
        
    function touch (event){ 
        var event = event || window.event; 
            
        var oInp = document.getElementById("inp"); 
    
        switch(event.type){ 
            case "touchstart": 
                oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; 
                break; 
            case "touchend": 
                oInp.innerHTML = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + " ;)"; 
                break; 
            case "touchmove": 
                event.preventDefault(); 
                oInp.innerHTML = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; 
                break; 
        } 
            
    } 
} 
window.addEventListener('load',load, false);

上記のコードを少し修正すると、次のように水平方向のスワイプの方向を判断して、それに対応するアクションを残します。 

function load(){
     
    document.addEventListener('touchstart',touch, false);
    document.addEventListener('touchmove',touch, false);
    document.addEventListener('touchend',touch, false);
     
    function touch (event){
        var event = event || window.event;
             
        var oInp = document.getElementById("inp");
        var distance,clientX_start,clientX_end,
            minRange=10;
            this.clientX_start;
            this.direction;
 
            this.callbackFun=function(){
            if(this.direction=='ltr') {
                console.log('left to right');
            }
            else {
                console.log('right-to-left');
            }
            }
        switch(event.type){
            case "touchstart":
                clientX_start=event.touches[0].clientX;
                this.clientX_start=clientX_start;
                break;
            case "touchend":
                this.callbackFun();
                break;
            case "touchmove":
                event.preventDefault();
               
                clientX_end = event.changedTouches[0].clientX;
                //judge the direction of movement
                distance=clientX_end - this.clientX_start;
                if(this.clientX_start+minRange<clientX_end) {
                    this.direction='ltr';
                }
                else if(this.clientX_start-minRange>clientX_end){
                    this.direction='rtl';
                }
                break;
        }  
    }
}
window.addEventListener('load',load, false);

HTML5のタッチイベント（touchstart、touchmove、touchend）については、この記事がすべてです。HTML5 のタッチ イベントについては、過去の記事を検索するか、引き続き以下の記事を参照してください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します