[JavaScript] マウスボタン押下/押上イベントを取得する（onMouseDown, onMouseUp）

投稿日：2016年10月22日更新日：2018年5月2日

マウスボタンを押したイベントを取得するにはonmousedown、
押し下げたマウスボタンを離したイベントを取得するにはonmouseupを使用します。

サンプルソース

例）divタグ上でマウスボタンを押した時と離した時に文字を変える

function mousedown(){
  document.getElementById("area1").innerText = "マウスボタンが押し下げられています。";
}
function mouseup(){
  document.getElementById("area1").innerText = "ここにマウスボタンが離されました。";
}

function mousedown(){

document.getElementById("area1").innerText = "マウスボタンが押し下げられています。";

}

function mouseup(){

document.getElementById("area1").innerText = "ここにマウスボタンが離されました。";

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Sample</title>
  <script src="sample.js"></script>
</head>
<body>
  <div id="area1" onmousedown="mousedown();" onmouseup="mouseup();"/>
    ここでマウスボタンを押してください。
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Sample</title>

</head>

<body>

ここでマウスボタンを押してください。

</div>

</body>

</html>

実行サンプル

下の黄色い部分でマウスボタンを押すと文字が変わります。

ここでマウスボタンを押してください。

解説

ボタンを押した瞬間と離した瞬間のみイベントが発生します。

執筆者：とら