href="javascript:Prochref();" の形式は古い書き方であり、アクセシビリティやセキュリティの観点からも推奨されません。
可能であれば、href は実際のリンク先を指定し、onclick 内で JavaScript を実行する記述方法が望ましいです。
aタグの onclick, mousedown, mouseup, href のJavaScriptの実行順と実行結果の紹介をします。
aタグ(ハイパーリンク)のタグに onclick, mousedown, mouseup, href にJavaScriptを記述した場合にどの順序で実行されるかを確認します。
以下のコードを記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script language="javascript" type="text/javascript">
function Prochref() {
var target = document.getElementById("output");
target.innerHTML += "hrefのJavaScriptが実行されました<br/>";
}
function ProcOnClick() {
var target = document.getElementById("output");
target.innerHTML += "onclickのJavaScriptが実行されました<br/>";
}
function ProcOnMouseDown() {
var target = document.getElementById("output");
target.innerHTML += "onmousedownのJavaScriptが実行されました<br/>";
}
function ProcOnMouseUp() {
var target = document.getElementById("output");
target.innerHTML += "onmouseupのJavaScriptが実行されました<br/>";
}
</script>
</head>
<body>
<h1>aタグのJavaScript実行順</h1>
<a href="javascript:Prochref();" onclick="ProcOnClick();" onmousedown="ProcOnMouseDown();" onmouseup="ProcOnMouseUp();">Exec</a><br />
<hr />
<div id="output"></div>
</body>
</html>
aタグにhref, onclick, onmousedown, onmouseup の属性を記述し、それぞれJavaSciriptの関数を呼び出します。
<a href="javascript:Prochref();" onclick="ProcOnClick();" onmousedown="ProcOnMouseDown();" onmouseup="ProcOnMouseUp();">Exec</a><br />
関数では、id="output" の要素にメッセージを表示します。
function Prochref() {
var target = document.getElementById("output");
target.innerHTML += "hrefのJavaScriptが実行されました<br/>";
}
function ProcOnClick() {
var target = document.getElementById("output");
target.innerHTML += "onclickのJavaScriptが実行されました<br/>";
}
function ProcOnMouseDown() {
var target = document.getElementById("output");
target.innerHTML += "onmousedownのJavaScriptが実行されました<br/>";
}
function ProcOnMouseUp() {
var target = document.getElementById("output");
target.innerHTML += "onmouseupのJavaScriptが実行されました<br/>";
}
上記のHTMLファイルをWebブラウザで表示します。
[Exec]のリンクをクリックします。
ページ下部にメッセージが表示されます。
Microsoft Edgeの場合には以下のメッセージとなります。
onmousedownのJavaScriptが実行されました
onmouseupのJavaScriptが実行されました
onclickのJavaScriptが実行されました
hrefのJavaScriptが実行されました
実行順は以下となります。
href="javascript:Prochref();" の形式は古い書き方であり、アクセシビリティやセキュリティの観点からも推奨されません。
可能であれば、href は実際のリンク先を指定し、onclick 内で JavaScript を実行する記述方法が望ましいです。
