element.onmousedown

onmousedownGlobalEventHandlers ミックスインのプロパティで、mousedown イベントを処理するイベントハンドラーです。

mousedown イベントは、ユーザーがマウスボタンを押したときに発生します。

メモ: onmousedown の反対の動作は onmouseup です。

構文

target.onmousedown = functionRef;

functionRef は、関数名または関数式です。この関数は、唯一の引数として MouseEvent オブジェクトを受け取ります。

この例は、マウスボタンを押したままにすると画像の一部を表示します。onmousedown, onmouseup, onmousemove イベントハンドラーを使用します。

HTML

<div class="container">
  <div class="view" hidden></div>
  <img src="https://interactive-examples.mdn.mozilla.net/media/examples/gecko-320-213.jpg">
</div>

CSS

.container {
  width: 320px;
  height: 213px;
  background: black;
}

.view {
  position: absolute;
  width: 100px;
  height: 100px;
  background: white;
  border-radius: 50%;
}

img {
  mix-blend-mode: darken;
}

JavaScript

function showView(event) {
  view.removeAttribute('hidden');
  view.style.left = event.clientX - 50 + 'px';
  view.style.top = event.clientY - 50 + 'px';
  event.preventDefault();
}

function moveView(event) {
  view.style.left = event.clientX - 50 + 'px';
  view.style.top = event.clientY - 50 + 'px';
}

function hideView(event) {
  view.setAttribute('hidden', '');
}

const container = document.querySelector('.container');
const view = document.querySelector('.view');

container.onmousedown = showView;
container.onmousemove = moveView;
document.onmouseup = hideView;

結果

仕様

仕様書 状態 備考
HTML Living Standard
onmousedown の定義
現行の標準

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
onmousedownChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報