要素のデフォルト処理を制御 : JavaScript
HTML要素はイベントに対応するデフォルトの動作を定義しているのもがあります。
例えばa要素のクリックイベントに対するデフォルト処理はhref属性に設定したリンク先への移動です。
a要素のclickイベントにJavaScriptで独自の処理を行う場合はa要素のデフォルト処理を制御した方が良い場合があります。
本記事ではデフォルト処理を制御する方法をまとめています。
<a onclick="alert('Hello World');" href="www.example.com">アラート画面を表示</a>
リンクがクリックされたときのデフォルトの動作は次のようになります。
リンクをクリック ⇒ onclickイベント発生 ⇒ onclickイベントハンドラ実行 ⇒ hrefの設定値(www.example.com)へ移動する。
イベントハンドラ
属性値に記述
<a onclick="alert('Hello World'); return false;" href="www.example.com">アラート画面を表示<a>
イベントハンドラの戻り値としてfalseを返すとa要素のデフォルト処理を停止します。
preventDefault（Firefox）・returnValue(IE)を利用(
<head>
<script type="text/javascript">
var handler = function (e) {
alert('Hello World');
if (e.preventDefault) {
e.preventDefault();
}
else if (window.event) {
window.event.returnValue = false;
}
}
window.onload = function () {
var elm = document.getElementById('sample');
elem.onclick = handler;
}
</script>
</head>
<body>
<a id="sample" href="http://www.example.com">アラート画面を表示</a>
</body>
イベントリスナー
<head>
<script type="text/javascript">
function listner (e) {
alert ('Hello World');
if (e.preventDefault) {
e.preventDefault();
}
else if(window.event) {
window.event.returnValue = false;
}
}
// イベントリスナー設定関数
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
}
else {
elm['on' + evType] = fn;
}
}
window.onload = function(){
var elm = document.getElementById('sample');
addEvent(elm,'click',listner,false);
}
</script>
</head>
<body>
<a id="sample" href="www.example.com">www.example.com</a>
</body>
関連記事
» クロスブラウザ対応イベントリスナー設定関数 : JavaScript
» イベントハンドラとeventオブジェクト
» イベントリスナーとeventオブジェクト
コメント
No comments yet.
コメントの投稿
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。