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

HTMLのdefaultPreventedイベントプロパティとは？使い方をサンプルコードで解説

defaultPreventedイベントプロパティとは

HTMLにおけるdefaultPreventedイベントプロパティは、イベントオブジェクトに対してpreventDefault()メソッドが呼び出されたかどうかを確認するために使用されます。戻り値は真偽値（boolean）であり、preventDefault()メソッドが呼び出されていればtrue、呼び出されていなければfalseを返します。

このプロパティは、リンクの遷移やフォームの送信など、ブラウザのデフォルト動作が実際にキャンセルされたかどうかをプログラム的に判定したい場合に非常に便利です。

構文

event.defaultPrevented

それでは、HTMLでdefaultPreventedイベントプロパティを実装する具体例を見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<h2>デモ見出し</h2>
<a id="myid" href="https://example.com/">デモ（クリックしてください）</a>
<script>
    document.getElementById("myid").addEventListener("click", function(event){
        event.preventDefault()
        alert("preventDefault()が呼び出されたか: " + event.defaultPrevented);
    });
</script>
</body>
</html>

実行結果

HTMLのdefaultPreventedイベントプロパティとは？使い方をサンプルコードで解説

このコードを実行してページ上のリンクをクリックすると、clickイベントハンドラー内でpreventDefault()が呼び出されるため、リンク先への遷移はキャンセルされます。その結果、アラートボックスには以下のように表示されます。

HTMLのdefaultPreventedイベントプロパティとは？使い方をサンプルコードで解説

まとめ

defaultPreventedプロパティを使うことで、イベントのデフォルト動作がキャンセル済みかどうかを簡単に判定できます。複数のイベントハンドラーが同じイベントに関連付けられている場合に、他のハンドラーですでに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でイベントの種類を判定しています。イベントの種