ywork2020.com

Title

要素がもつ既定動作を防ぐ

目次 (INDEX)

preventDefaultとは

ここで説明する preventDefault とは次の語句からなるjQueryのEventObjectメソッドです。
prevent
読み: プレベント
意味: 防ぐ、回避する
default
読み: デフォルト
意味: 既定、義務、初期設定

目次に戻る

preventDefaultメソッドの概要

この EventObject メソッドは、イベントの呼び出し元要素がもつ既定の動作を回避します。

例えば、a 要素は 「 クリックすることで指定されたページを読込む 」 という既定の動作がありますが、 preventDefault は、この既定動作を回避することができます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

構文は 02 行目の部分です。 02 行目の eo は 01行目の function(eo) の イベントオブジェクトを参照しています。

$(Selector).EventMethod(function(eo){
	eo.preventDefault();
});

目次に戻る

サンプルコードと実行結果

ここでは、アンカー要素の click イベントに関数をアタッチしておき、 イベントメソッドを実行した時に生成されるイベントオブジェクトの 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>
	<script>...</script>
</body>
  • 06: a id="idA" (idA の識別子をもつアンカーです。この要素のクリックイベントで既定動作を防ぐ処理を行っています。)
サンプルコード: script
<script>
	$("#idA").click(function(eo){
		eo.preventDefault();
	});
</script>
  • 03: eo.preventDefault() (イベントオブジェクトの preventDefault メソッドを使って a 要素のクリックによる既定の動作を停止しています。 この 03 行目の eo は 02 行目の function(eo) を参照しています。)
実行結果:
ywork2020.com

目次に戻る