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

HTML DOMのtouchcancelイベントとは？構文とサンプルコードを解説

touchcancelイベントとは

HTML DOMのtouchcancelイベントは、1つ以上のタッチイベントが中断されたときに発生します。たとえば、指で画面に触れている最中にブラウザがスクロールなどのジェスチャーを検出したり、システム側がタッチ処理をキャンセルしたりした場合に発火します。

注意：このイベントはタッチ対応デバイス（スマートフォンやタブレットなど）でのみ機能します。マウスのみを使用するPC環境では発生しないため、実装時にはその点を考慮しておきましょう。

構文

touchcancelイベントの設定方法は、HTML属性を使う方法とJavaScriptを使う方法の2種類があります。

HTML属性として指定する場合

ontouchcancel = "eventFunction()"

JavaScriptで指定する場合

eventObject.ontouchcancel = eventFunction

使用例

以下は、touchcancelイベントプロパティを使った具体的なサンプルコードです。テキスト入力欄にontouchcancel属性を設定し、タッチが中断されたときにメッセージを表示する仕組みになっています。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM touchcancel event</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>
        <fieldset>
            <legend>HTML-DOM-touchcancel-event</legend>
            <label for="textSelect">Proverb --></label>
            <input type="text" ontouchcancel="eventAction()" id="textSelect" size="30" value="Too many     cooks spoil the broth" disabled>
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var textSelect = document.getElementById("textSelect");
    function eventAction() {
        divDisplay.textContent = 'Too many touch events triggered and disrupted';
    }
</script>
</body>
</html>

実行結果

画面に触れる前の表示：

HTML DOMのtouchcancelイベントとは？構文とサンプルコードを解説

画面上で複数のタッチイベントを発生させ、中断された後の表示：

HTML DOMのtouchcancelイベントとは？構文とサンプルコードを解説

このように、タッチ操作が途中でキャンセルされたタイミングを検知したい場合には、touchcancelイベントを活用することで、ユーザーの操作状態に応じた柔軟な処理を実装できます。

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