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

HTML DOM TouchEventのtouchesプロパティとは？使い方とサンプルコードを解説

TouchEvent touchesプロパティとは

HTML DOMのTouchEventにおけるtouchesプロパティは、タッチ面（タッチスクリーンなど）上で発生したすべての接触ポイント（コンタクトポイント）のリストに対応するTouchListオブジェクトを返します。

注意：指定されたノード、またはその子ノード上でタッチが発生した場合、その後に続くタッチ操作は、同じノード上で発生していなくてもカウント対象になります。

構文

TouchListオブジェクトを取得するための構文は以下の通りです。

event.touches

補足：本記事のタッチイベントのサンプルコードは、モバイル端末やタッチ操作対応デバイスからアクセス可能なオンラインHTMLエディタ上で実行しています。「画面を2秒間タッチする」といった実際のタッチ操作を実行・確認できるようにするためです。

TouchEvent touchesプロパティの使用例

それでは、TouchEvent touchesプロパティの具体的な使用例を見てみましょう。以下のサンプルでは、フォーム要素に指を置いたユーザーの数（タッチポイント数）を取得し、画面に表示します。

<!DOCTYPE html>
<html>
<head>
<title>TouchEvent touches</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
    <form id="formSelect" ontouchstart="startEventAction(event)" ontouchend="endEventAction(event)">
        <fieldset>
           <legend>TouchEvent-touches</legend>
           <label for="textSelect">Game Players Selector</label>
           <div id="divDisplay">All Players Place a Finger on Screen<br>Game Starting in 2 sec</div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var gameSelect = document.getElementById("formSelect");
    var duration = 2000;
    var timer;
    gameSelect.ontouchstart = startEventAction;
    function startEventAction(event) {
        timer = setTimeout(function(){
            eventAction(event)
        }, duration);
    }
    function endEventAction(event){
        if(timer)
        clearTimeout(timer);
        eventAction(event);
    }
    function eventAction(event) {
        var players = event.touches.length;
        divDisplay.textContent = 'Total Players: '+players;
        gameSelect.removeAttribute('ontouchstart');
        gameSelect.removeAttribute('ontouchend');
    }
</script>
</body>
</html>

このコードでは、フォーム要素に対してontouchstartイベントとontouchendイベントを設定し、タッチ開始から2秒後にevent.touches.lengthによって画面上の接触ポイントの総数を取得しています。

実行結果

フォーム要素に触れる前の表示は以下の通りです。

HTML DOM TouchEventのtouchesプロパティとは？使い方とサンプルコードを解説

フォーム要素を2秒間タッチした後の表示は以下の通りです。

HTML DOM TouchEventのtouchesプロパティとは？使い方とサンプルコードを解説

  1. HTML DOM TouchEventのmetaKeyプロパティとは？使い方とサンプルコードを解説

    HTML DOM の TouchEvent metaKey プロパティは、タッチイベントが発生した時点で Meta キーが押されていたかどうかの状態を示すブール値（true / false）を返します。Mac の Command キーや Windows キーなどが Meta キーに該当します。 構文 metaKey プロパティは、以下のように記述することでブール値を取得できます。 touchEvent.metaKey 戻り値（booleanValue） booleanValue詳細 trueタッチイベントが発生したときに Meta キーが押されていたことを示します。 falseタッチイ

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

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