isDefaultPreventedとは
- ここで説明する isDefaultPrevented とは次の語句からなるjQueryのEventObjectメソッドです。
- is
- 読み: イズ
意味: 「～です」の疑問形、ですか - default
- 読み: デフォルト
意味: 既定、義務、初期設定 - prevented
- 読み: プレベンテッド
意味: 「防ぐ」、「回避する」の過去形
isDefaultPreventedメソッドの概要
単純にいうと、この EventObject メソッドは、 preventDefault() を利用しているか否かを調べることができます。 戻り値は true か false です。
preventDefault()
はイベントの呼び出し元要素がもつ既定の動作を回避します。
例えば、a 要素は 「 クリックすることで指定されたページを読込む 」 という既定の動作がありますが、
preventDefault は、この既定動作を回避することができます。
構文
サンプルを見る前に構文を確認しておきます。
構文は 02 行目の部分です。 02 行目の eo は 01行目の function(eo) の イベントオブジェクトを参照しています。
$(Selector).EventMethod(function(eo){
eo.isDefaultPrevented();
});サンプルコードと実行結果
ここでは、アンカー要素の click イベントに関数をアタッチしておき、 イベントメソッドを実行した時に生成されるイベントオブジェクトの preventDefault メソッドを使って アンカーの既定動作を防いでいます。 また、isDefaultPrevented() を使って preventDefault() が実行されているかを判定して表示するようにしています。
結果として、アンカーをクリックしてもリンク先のページは読み込まれません。
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<a id="idA" href="https://ywork2020.com">ywork2020.com</a>
<output id="idResult"></output>
<script>...</script>
</body>
- 06: a id="idA" (idA の識別子をもつアンカーです。この要素のクリックイベントで既定動作を防ぐ処理を行っています。)
- 07: output id="idResult" (idResult の識別子をもつ出力要素です。この要素に isDefaultPrevented() の結果を出力します。)
サンプルコード: script
<script>
$("#idA").click(function(eo){
eo.preventDefault();
$("#idResult").text(eo.isDefaultPrevented());
});
</script>
- 03: eo.preventDefault() (イベントオブジェクトの preventDefault メソッドを使って a 要素のクリックによる既定の動作を停止しています。 この 03 行目の eo は 02 行目の function(eo) を参照しています。)
- 04: eo.isDefaultPrevented() (イベントオブジェクトの isDefaultPrevented メソッドを使って preventDefault() が実行されているかを調査しています。)