JavaScriptのOnClick, OnMouseDown, OnMouseUp の違い、イベントが発生する順番 - JavaScript
JavaScriptのOnClick, OnMouseDown, OnMouseUp の違いとイベントが発生する順番を紹介します。
概要
JavaScriptの要素のマウスボタンのイベントには、OnClick, OnMouseDown, OnMouseUp がありますが、
それぞれの違いと、イベントの発生順序を紹介します。
動作確認コード
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.Frame{
border:1px solid #ff6a00;
padding:0.5rem 1rem 0.5rem 1rem;
display:inline-block;
}
#OutText {
width:640px;
height:320px;
}
</style>
<script type="text/javascript">
function OnFrameClick() {
var elem = document.getElementById('OutText');
elem.insertAdjacentText('beforeend', "OnClick イベントが発生しました。\r\n");
}
function OnFrameMouseDown() {
var elem = document.getElementById('OutText');
elem.insertAdjacentText('beforeend', "OnMouseDown イベントが発生しました。\r\n");
}
function OnFrameMouseUp() {
var elem = document.getElementById('OutText');
elem.insertAdjacentText('beforeend', "OnMouseUp イベントが発生しました。\r\n");
}
</script>
</head>
<body>
<h1>MouseButton Event Demo</h1>
<div class="Frame" onclick="OnFrameClick();" onmousedown="OnFrameMouseDown();" onmouseup="OnFrameMouseUp();">クリックしてください。</div>
<hr />
<div>
<textarea id="OutText"></textarea>
</div>
</body>
</html>
動作確認:単純なクリック
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
オレンジ色の[クリックしてください。]の枠でマウスの左ボタンをクリックします。
クリックすると以下のメッセージがテキストエリアに表示されます。
OnMouseDown → OnMouseUp → OnClick の順番でイベントが発生することが確認できます。
OnMouseDown イベントが発生しました。
OnMouseUp イベントが発生しました。
OnClick イベントが発生しました。
動作確認:枠の外でマウスボタンを押し、枠内でマウスボタンを離す
続いて、枠の外でマウスボタンを押下し、枠内でマウスボタンを離す動作結果を確認します。
結果は下図です。OnMouseUpイベントのみが発生します。OnClickイベントは発生しない点がポイントです。
OnMouseUp イベントが発生しました。
動作確認:枠の中でマウスボタンを押し、枠外でマウスボタンを離す
枠の中でマウスボタンを押下し、枠の外でマウスボタンを離す場合の動作結果を確認します。
結果は下図です。OnMouseUpイベントのみが発生します。この場合もOnClickイベントは発生しません。
OnMouseDown イベントが発生しました。
まとめ
OnClickイベントは枠内でMouseDownとMouseUpが初声敷いた場合に発生するイベントであることが確認できました。
また、OnClickイベントはMouseDownイベントやMouseUpイベントの後で発生するイベントであることも確認できました。
このページのキーワード
- JSのOnClick, OnMouseDown, OnMouseUp の違い、イベントが発生する順番
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
