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

HTML DOMのtouchstartイベントとは？基本構文と実装例をわかりやすく解説

HTML DOMのtouchstartイベントは、ユーザーがタッチスクリーンに指を触れた瞬間に発生するイベントです。スマートフォンやタブレットなど、タッチ操作に対応したデバイスで動作するWebアプリケーションを開発する際に重要な役割を果たします。

注意：このイベントはタッチ対応デバイス（モバイル端末やタッチパネル搭載PCなど）でのみ発生します。マウスのみの環境では動作しないため、必要に応じてmousedownイベントとの併用も検討しましょう。

touchstartイベントの構文

HTML属性で指定する場合

ontouchstart = "eventFunction()"

JavaScriptで指定する場合

eventObject.ontouchstart = eventFunction;

補足：本記事のサンプルコードは、モバイル端末またはタッチ操作が可能な環境からオンラインHTMLエディターにアクセスして実行することを想定しています。画面を1秒間タッチし続けるといった実際のタッチ操作を試すことで、イベントの挙動を正しく確認できます。

touchstartイベントの実装例

以下の例では、ボタンをタッチして1秒間押し続けると「You Win」と表示されるシンプルなゲームを作成しています。ontouchstartでタイマーを開始し、指を離した際に発火するontouchendでタイマーを解除する仕組みです。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM touchstart event</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-touchstart-event</legend>
            <label for="textSelect">Game Time</label>
            <input type="button" id="gameSelect" value="Hold On">
            <div id="divDisplay">Hold On for 1 - sec to Win</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 = "You Win"
    }
</script>
</body>
</html>

実行結果

ボタンをタッチする前：

HTML DOMのtouchstartイベントとは？基本構文と実装例をわかりやすく解説

画面上の「Hold On」ボタンをタッチした後：

HTML DOMのtouchstartイベントとは？基本構文と実装例をわかりやすく解説

まとめ

touchstartイベントは、タッチデバイスでのユーザー操作を検知するための基本的なイベントです。長押し検出、スワイプ操作の起点、カスタムジェスチャーの実装など、さまざまな場面で活用できます。併せてtouchmoveやtouchendなどの関連イベントも理解しておくと、よりリッチなタッチ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でイベントの種類を判定しています。イベントの種