JavaScript のpreventDefault のありなしによる動作の違いについて紹介します。
概要
preventDefault メソッドを呼び出すことで標準の動作を無効にすることができます。この記事では、コード例を利用して、preventDefauiltメソッドのありなしでの動作の違いを確認します。
例
コード
下記のHTML, CSSファイルを作成します。
.LongTextBox{
width:90%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="TextBoxDrop.css" />
<script type="text/javascript">
var textBox;
function load() {
var zone = document.querySelector('#DropTextBox2');
zone.addEventListener('drop', onDrop, false);
zone = document.querySelector('#DropTextBox3');
zone.addEventListener('drop', onDropPrevent, false);
}
function textBox_Change() {
alert("Change");
}
function onDrop(event) {
}
function onDropPrevent(event) {
event.preventDefault();
}
</script>
</head>
<body onload="load();">
<input id="DropTextBox1" type="text" class="LongTextBox" onchange="textBox_Change" />
<hr />
<input id="DropTextBox2" type="text" class="LongTextBox" onchange="textBox_Change" />
<hr />
<input id="DropTextBox3" type="text" class="LongTextBox" onchange="textBox_Change" />
</body>
</html>
解説
HTMLに3つのINPUTタグのテキストボックスを設置します。一番上のテキストボックスは何も設定のない単純に配置したテキストボックスです。2つ目のテキストボックスは、addEventListener() メソッドを呼び出し、drop イベントにイベントハンドラを設定しています。3つ目のテキストボックスは2つ目のテキストボックスと同様にaddEventListener() メソッドを呼び出し、drop イベントにイベントハンドラを設定し、さらにイベントハンドラで、preventDefault() メソッドを呼び出しています。
3つのテキストボックスでどのような動作になるかを確認します。
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図のウィンドウが表示されます。
Webブラウザをもう一つ起動します。
何も設定していないテキストボックスにリンクをドロップした場合
Webブラウザのハイパーリンクをドラッグして、作成したHTMLを表示しているWebブラウザの一番上のテキストボックスにドロップします。
ドロップすると、リンク先のURLがテキストボックスに表示されます。
drop イベントハンドラーを設定したテキストボックスにリンクをドロップした場合
続いて、Webブラウザのハイパーリンクをドラッグして、作成したHTMLを表示しているWebブラウザの2番目のテキストボックスにドロップします。
ドロップすると、リンク先のURLがテキストボックスに表示されます。
drop イベントハンドラーでpreventDefault() メソッドを呼び出すテキストボックスにリンクをドロップした場合
Webブラウザのハイパーリンクをドラッグして、作成したHTMLを表示しているWebブラウザの3番目のテキストボックスにドロップします。
ドロップしても、リンク先のURLはテキストボックスに表示されません。
テキストボックスではデフォルトの動作として、ドロップされたハイパーリンクのURLを表示する動作になっています。しかし、drop イベントのイベントハンドラーの関数内でpreventDefault() メソッドを呼び出すと、デフォルトのドロップされたハイパーリンクのURLを表示する動作をブロックすることができます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2024-01-07
作成日: 2018-11-29
