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

HTML DOMのcancelableイベントプロパティの使い方とサンプルコード

HTML DOMのcancelableイベントプロパティとは

HTML DOMのcancelableイベントプロパティは、JavaScriptが反応できるHTMLイベントに関連付けられたプロパティです。このプロパティは、そのイベントがキャンセル（取り消し）可能かどうかを示すブール値（true または false）を返します。

例えば、click イベントのように preventDefault() メソッドでデフォルト動作を阻止できるイベントは true を返しますが、マウスオーバーのようにキャンセルできないイベントは false を返します。

構文

cancelableイベントプロパティの構文は以下の通りです。

event.cancelable

サンプルコード

実際にcancelableイベントプロパティを使った例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<p>下のボタンにマウスを乗せると、onmouseoverイベントがキャンセル可能かどうかが表示されます</p>
<button onmouseover="cancelFunction(event)">CLICK IT</button>
<p id="Sample"></p>
<script>
   function cancelFunction(event) {
      var x = event.cancelable;
      if(x==true)
         document.getElementById("Sample").innerHTML = "onmouseoverイベントはキャンセル可能です";
      else
         document.getElementById("Sample").innerHTML = "onmouseoverイベントはキャンセルできません";
   }
</script>
</body>
</html>

実行結果

このコードを実行すると、次のような画面が表示されます。

HTML DOMのcancelableイベントプロパティの使い方とサンプルコード

「CLICK IT」ボタンにマウスカーソルを乗せると、以下のように判定結果が表示されます。

HTML DOMのcancelableイベントプロパティの使い方とサンプルコード

コードの解説

まず、マウスホバー時に onmouseover イベントオブジェクトを cancelFunction(event) 関数へ渡すボタンを作成しています。

<button onmouseover="cancelFunction(event)">CLICK IT</button>

cancelFunction(event) 関数内では、渡されたイベントオブジェクトの event.cancelable の値を取得して変数 x に代入します。その後、条件分岐を使って cancelable の戻り値が true か false かを判定し、idが「Sample」の段落要素（<p>タグ）に対応するメッセージを表示します。

function cancelFunction(event) {
   var x = event.cancelable;
   if(x==true)
      document.getElementById("Sample").innerHTML = "onmouseoverイベントはキャンセル可能です";
   else
      document.getElementById("Sample").innerHTML = "onmouseoverイベントはキャンセルできません";
}

まとめ

cancelable プロパティを活用することで、イベントハンドラ内でそのイベントが preventDefault() によるデフォルト動作のキャンセルに対応しているかどうかを事前に判別できます。特に汎用的なイベント処理関数を作成する際に、イベントごとの挙動を安全に制御するために役立ちます。

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

    TouchEvent touchesプロパティとはHTML DOMのTouchEventにおけるtouchesプロパティは、タッチ面（タッチスクリーンなど）上で発生したすべての接触ポイント（コンタクトポイント）のリストに対応するTouchListオブジェクトを返します。注意：指定されたノード、またはその子ノード上でタッチが発生した場合、その後に続くタッチ操作は、同じノード上で発生していなくてもカウント対象になります。構文TouchListオブジェクトを取得するための構文は以下の通りです。event.touches補足：本記事のタッチイベントのサンプルコードは、モバイル端末やタッチ操作対応デバイ

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

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