onmousedown
は GlobalEventHandlers
ミックスインのプロパティで、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 の定義 |
現行の標準 |
ブラウザの互換性
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
関連情報
mousedown
event