HTML の onmousedown 属性

HTMLタグのonmousedown属性には、マウスのボタンが押下されたときに実行するJavaScriptを記述します。onmousedown属性は省略可能です。

押したマウスのボタンを離すと、mouseupイベントが発生します。

サンプル

<button type="button" onmousedown="mouseDown()" onmouseup="mouseUp()">
  Button
</button>
<p>
  Event: <span id="event"></span>
</p>
<script>
  function mouseDown() {
    document.getElementById("event").innerHTML = "mousedown";
  }
  function mouseUp() {
    document.getElementById("event").innerHTML = "mouseup";
  }
</script>

Event:

要素

次に示すイベント・ハンドラ・コンテンツ属性は、任意のHTML要素に指定することができる。

バブリング

mousedownイベントはバブリング（下位の要素から上位の要素へ伝播）する。

HTMLが次に示す構造である場合、input要素で発生したmousedownイベントは、fieldset、form、body及びhtml要素へと伝播していく。

html
- body
  - form
    - fieldset
      - input

もしfieldset、form、body及びhtml要素にonmousedown属性を指定した場合、それらのJavaScriptも実行される。

キャンセル

mousedownイベントはキャンセル可能である。

mousedownイベントをキャンセルすると、デフォルト動作が行われなくなる。

インタフェース

mousedownイベントはMouseEventインタフェースを実装している。

MouseEventインタフェースは次に示すプロパティを持つ。

screenX: スクリーン座標系の原点を基準とした、イベント発生時の水平座標
screenY: スクリーン座標系の原点を基準とした、イベント発生時の垂直座標
clientX: イベントが発生した水平座標を、そのイベントに関連付けられたビューポートに対して相対的に示す。
clientY: イベントと関連付けられたビューポートを基準とした、イベントが発生した垂直座標
ctrlKey: Control (コントロール) キー修飾子がアクティブであった場合、true を返す。
shiftKey: シフト（Shift）キー修飾子が有効であった場合、true を返す。
altKey: Alt（代替）キー（または "Option"）修飾子が有効であった場合、true を返す。
metaKey: メタ（Meta）キー修飾子が有効であった場合、true を返す
button: マウスボタンの押下や離脱によるマウスイベントにおいて、どのポインタデバイスのボタンが状態を変化させたかを示すために button を使用しなければならない。
buttons: 任意のマウスイベントにおいて、現在押されているマウスのボタンの組み合わせをビットマスクで表現し、ボタンを使用する必要がある。
relatedTarget: イベントの種類に応じて、UI イベントに関連する二次的な EventTarget を識別するために使用される。

イベントリスナー

onmousedown属性を使わずに、イベントリスナーを使ってイベント処理を行うこともできます。

<button type="button" id="btn">
  Button
</button>
<p>
  Event: <span id="evnt"></span>
</p>
<script>
  e = document.getElementById("btn");
  e.addEventListener("mousedown", function(){
    document.getElementById("evnt").innerHTML = "mousedown";
  });
  e.addEventListener("mouseup", function(){
    document.getElementById("evnt").innerHTML = "mouseup";
  });
</script>

Event: