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

HTML DOMのtouchendイベントとは？基本構文とサンプルコードをわかりやすく解説

touchendイベントとは

HTML DOMのtouchendイベントは、ユーザーがタッチスクリーンから指を離した（タッチが解除された）瞬間に発生するイベントです。タップ操作の終了を検知したい場合などに活用されます。

注意： このイベントはスマートフォンやタブレットなどのタッチ対応デバイスでのみ動作し、マウス操作では発生しません。

touchendイベントの基本構文

touchendイベントの登録方法には、主に以下の2つの方法があります。

HTML属性で指定する場合

ontouchend = "eventFunction()"

JavaScriptで指定する場合

eventObject.ontouchend = eventFunction

touchendイベントの使用例

ここでは、ボタンを1秒間押し続けると勝ち、途中で指を離すと失敗となるシンプルなミニゲームを通じて、touchendイベントの動作を確認してみましょう。

  • ontouchstart：指が画面に触れた瞬間にタイマーを開始
  • ontouchend：指が離れた時点でタイマーをキャンセル
  • 1秒間押し続けられれば「You Win（あなたの勝ち）」と表示される

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM touchendイベント</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 50%;
        font-size: 20px;
        padding: 20px;
        border: 5px solid rgb(220, 53, 69);
        background: rgba(220, 53, 69, 0.5);
        color: #fefefe;
    }
</style></head>
<body>
    <form>
        <fieldset>
            <legend>HTML-DOM-touchend-event</legend>
            <label for="textSelect">ゲーム時間</label>
            <input type="button" id="gameSelect" value="押し続ける">
            <div id="divDisplay">1秒間押し続けると勝利！</div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var gameSelect = document.getElementById("gameSelect");
    var duration = 1000;
    var timer;
    gameSelect.ontouchstart = startEventAction;
    function startEventAction() {
        timer = setTimeout(victory, duration);
    }
    gameSelect.ontouchend = endEventAction;
    function endEventAction(){
        if(timer)
            clearTimeout(timer);
        }
        function victory(){
            divDisplay.textContent = "あなたの勝ち！"
        }
</script>
</body>
</html>

実行結果

「押し続ける」ボタンに触れる前の表示は以下の通りです。

HTML DOMのtouchendイベントとは？基本構文とサンプルコードをわかりやすく解説

画面上の「押し続ける」ボタンに触れた後の表示は以下の通りです。

HTML DOMのtouchendイベントとは？基本構文とサンプルコードをわかりやすく解説

まとめ

touchendイベントは、タッチ操作の終了を検知できる便利なイベントです。今回のようにsetTimeout()と組み合わせれば、「長押し」を判定する処理も簡単に実装できます。

なお、タッチ関連のイベントには、指が画面に触れたときに発生するtouchstart、指を動かしたときに発生するtouchmove、タッチが中断されたときに発生するtouchcancelなどもあります。これらを組み合わせることで、よりリッチなタッチ操作UIを構築することが可能です。

  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でイベントの種類を判定しています。イベントの種