デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.isDefaultPrevented( )preventDefaultメソッドが実行されたかを調査

構文

preventDefaultメソッドが実行されたかを調査返値:true/false
イベントオブジェクト.isDefaultPrevented( )ver1.3〜

機能

イベントオブジェクトに対しisDefaultPreventedメソッドを利用すると、そのイベントオブジェクトがpreventDefaultメソッドを実行したか否かを調査します。利用していた場合はtrueを、していない場合はfalseを返します。

このメソッドはpreventDefaultメソッドを先に理解している必要があります。

解説

preventDefaultメソッドが実行されたかを調査する

サンプル(isDefaultPrevented/01.html)を開いてbody内にa要素が1つあることを確認してください。jQueryは以下の様に記述され、a要素がクリックされたらpreventDefaultメソッドを利用して、ブラウザ標準の処理(a要素ではリンク)をしないようにしています。

そして3行目でisDefaultPreventedメソッドを利用しているか否かを調査し、その結果をアラートで表示します。

$("a").click(function(eo){
	eo.preventDefault();
	alert(eo.isDefaultPrevented());
});

結果として、a要素をクリックするとアラートで「true」と表示されます。

preventDefaultメソッドを利用しないサンプルも用意しました。サンプル(isDefaultPrevented/01b.html)を開いて、以下の様にpreventDefaultメソッドがコメントアウトされているのを確認して下さい。

$("a").click(function(eo){
	//eo.preventDefault();
	alert(eo.isDefaultPrevented());
});

結果として、a要素をクリックするとアラートで「false」と表示されます。ブラウザ標準の処理を停止していないので、アラートを閉じるとリンクします。

メモ

イベントオブジェクトを使いまわす

何となく、少しややこしいサンプルを作成してみました。イベントオブジェクトは引数で他のfunctionに渡すことができます。渡された先のfunctionでpreventDefaultメソッドを利用を利用されても、isDefaultPreventedできちんと調査できます。

サンプル(isDefaultPrevented/test01.html)のjQueryは以下の様に記述されています。4行目でクリック時に実行するfunctionが設定されており、5行目でイベントオブジェクトをaaaFuncに渡しています。そしてaaaFunc(1〜3行目)で、そのイベントオブジェクトに対しpreventDefaultメソッドを利用しました。

function aaaFunc(myEO){
	myEO.preventDefault();
}
$("a").click(function(eo){
	aaaFunc(eo)
	alert(eo.isDefaultPrevented());
});

イベントオブジェクト名は「eo」から「myEO」になっていますが、イベントオブジェクトとしては同一(参照の値渡し)のため、6行目の「eo.isDefaultPrevented()」によって、preventDefaultメソッドの利用を確認することができます。

triggerと合わせて利用

上記のisDefaultPrevented/test01.htmlを、すこし実用的にしたサンプルがtriggerに紹介されています。triggerは引数にイベントオブジェクトを利用できるため、isDefaultPrevented/test01.htmlのテクニックが応用できるのです。確認しておくと良いでしょう。→サンプル(trigger/03.html