HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのtouchmoveイベントとは？基本構文とサンプルコードで学ぶタッチ操作

HTML DOMのtouchmoveイベントは、タッチスクリーン上で指（タッチポイント）が移動している間、継続的に発生するイベントです。指を画面に触れたままスライドさせるたびに何度も発火するため、ドラッグ操作やペイントアプリ、ミニゲームなど、インタラクティブなタッチUIを実装する場面で非常に役立ちます。

※ 注意：このイベントはスマートフォンやタブレットなどタッチ対応デバイス専用です。マウス操作では発生しないため、動作確認の際はタッチ端末を使用してください。

touchmoveイベントの基本構文

1. HTMLの属性として記述する場合

ontouchmove = "eventFunction()"

2. JavaScriptでイベントハンドラを設定する場合

eventObject.ontouchmove = eventFunction;

3. addEventListener()を使う場合（推奨）

element.addEventListener('touchmove', eventFunction);

複数のリスナーを登録したい場合や、後からremoveEventListener()で監視を解除したいケースでは、addEventListener()を使う方法がおすすめです。

補足：本記事のタッチイベントのサンプルは、モバイル端末またはタッチ対応システムからアクセスできるオンラインHTMLエディタ上で実行しています。「画面を2秒間タッチする」など、実際のタッチ操作を試すためです。

サンプルコード：touchmoveイベントで作るミニゲーム

次の例では、緑色の「安全エリア」内で指をスライドさせ、赤い「危険エリア」に触れずにゴールを目指すシンプルなゲームを通じて、touchmoveイベントの使い方を確認できます。

コード全体

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM touchmoveイベント</title>
<style>
    * {
        padding: 2px;
        margin:5px;
    }
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    #outer {
        width:70%;
        margin: 0 auto;
        padding: 0;
        text-align: center;
        border:1px solid black;
        height: 105px;
        background-color: #28a745;
    }
    input[type="button"] {
        border-radius: 10px;
    }
    #upper {
        border-bottom: 1px solid black;
        height: 40px;
        margin: 0 0 15px 0;
        background-color: #DC3545;
    }
    #lower {
        border-top: 1px solid black;
        height: 40px;
        margin: 15px 0 0 0;
        background-color: #DC3545;
    }
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>HTML DOM touchmoveイベント</legend>
            <div id="outer">
            <div id="upper"><h2>危険</h2></div>
            <div id="lower"><h2>危険</h2></div>
            </div>
            <input type="button" id="start" value="スタート" onclick="gameStart()">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById('divDisplay');
    var gameDisplay = document.getElementById('outer');
    function playGame(event) {
        var x = event.touches[0].clientX;
        var y = event.touches[0].clientY;
            if(y > 95 && y < 110){
                divDisplay.textContent = 'その調子！';
                    if(x === 439){
                        divDisplay.textContent = 'おめでとう！成功です！';
                        gameDisplay.removeEventListener('touchmove', playGame);
                    }
            }
            else{
                divDisplay.textContent = '危険エリアに移動しました。あなたの負けです！';
                gameDisplay.removeEventListener('touchmove', playGame);
            }
    }
    function gameStart(){
        gameDisplay.addEventListener('touchmove',playGame);
    }
</script>
</body>
</html>

実行結果

① 「Start」ボタンを押し、指が緑色の安全エリア内にある状態：

HTML DOMのtouchmoveイベントとは？基本構文とサンプルコードで学ぶタッチ操作

② 安全エリアの終端（x=439）まで到達した状態：「おめでとう！成功です！」と表示され、ゲームクリアとなります。

HTML DOMのtouchmoveイベントとは？基本構文とサンプルコードで学ぶタッチ操作

③ 赤色の危険エリアに指が入ってしまった状態：「危険エリアに移動しました…」と表示され、ゲームオーバーです。

HTML DOMのtouchmoveイベントとは？基本構文とサンプルコードで学ぶタッチ操作

コードのポイント解説

  • event.touches[0].clientX / clientY：画面に接触している最初の指のX・Y座標を取得できます。
  • y > 95 && y < 110：指が安全レーン（緑エリア中央付近）にいるかどうかをY座標で判定しています。
  • x === 439：安全エリアの右端に到達したらクリア判定となります。
  • removeEventListener()：ゲーム終了後にtouchmoveイベントの監視を解除し、以降の操作を無効化しています。
  • gameStart()：「Start」ボタンがクリックされたタイミングで、緑エリアにtouchmoveリスナーを登録します。

関連するタッチイベント一覧

イベント名発生タイミング
touchstart画面に指が触れた瞬間
touchmove指が画面上を移動している間（連続的に発火）
touchend指が画面から離れた瞬間
touchcancelタッチがシステムによって中断されたとき

これらのイベントを組み合わせることで、スワイプやピンチ操作など、より高度なタッチUIを実装できます。まずはtouchmoveイベントで座標を取得するところから、ぜひ試してみてください。

  1. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注

  2. HTML DOM Event typeプロパティとは？イベントの種類を取得する方法を実例付きで解説

    HTML DOM Event typeプロパティとはHTML DOMのEvent typeプロパティは、発生したイベントの種類に対応する文字列を返すプロパティです。「click」「keypress」「load」「touchend」など、さまざまなイベントタイプを取得できます。構文イベントの種類を文字列として取得するには、以下のように記述します。event.typeそれでは、Event typeプロパティの具体的な使用例を見ていきましょう。使用例以下のサンプルでは、赤い円形の要素に対して「クリック」または「タッチ」が行われた際に、event.typeでイベントの種類を判定しています。イベントの種