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要素へと伝播していく。

もし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:

関連記事

class

dir

id

lang

onblur

onchange

onclick

oncontextmenu

ondblclick

onfocus

onkeydown

onkeypress

onkeyup

onmousemove

onmouseout

onmouseover

onmouseup

onselect

style

title

参考文献

Web Hypertext Application Technology Working Group (2022) "Web application APIs" HTML Living Standard

World Wide Web Consortium (2021) UI Events