イベントで実行されるJavaScriptでalertを実行すると他のイベントが発生しない現象について紹介します。
次のコードを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script language="javascript" type="text/javascript">
function Prochref() {
alert('hrefのJavaScriptが実行されました');
}
function ProcOnClick() {
alert('onclickのJavaScriptが実行されました');
}
function ProcOnMouseDown() {
alert('onmousedownのJavaScriptが実行されました');
}
function ProcOnMouseUp() {
alert('onmouseupのJavaScriptが実行されました');
}
</script>
</head>
<body>
<h1>aタグのイベントでalertを実行する</h1>
<a href="javascript:Prochref();" onclick="ProcOnClick();" onmousedown="ProcOnMouseDown();" onmouseup="ProcOnMouseUp();">Exec</a><br />
</body>
</html>
aタグには、href onclick onmousedown onmouseup の4つのイベントが記述されており、リンクをクリックすると4つの関数が実行される想定です。
<a href="javascript:Prochref();" onclick="ProcOnClick();" onmousedown="ProcOnMouseDown();" onmouseup="ProcOnMouseUp();">Exec</a>
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
[Exec]リンクをクリックします。onmousedownのイベントが実行され、alert()関数が呼び出され、ダイアログが表示されます。
[OK]ボタンをクリックします。
他のイベントは発生せず、ページが表示された状態に戻ります。
最初に実行される onmousedown イベントで alert() を呼び出すと、そのモーダルなダイアログ表示によって
マウスイベントの通常の連鎖が中断され、結果として onmouseup onclick そして href に記述された JavaScript の実行まで到達しなくなるためです。
onmousedown での alert() の使用を避ける方法が基本になります。
setTimeout() などを用いて処理のタイミングをずらす方法もありますが、タイミング問題が発生する可能性があるため、お勧めできません。
