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
関連情報
mousedown
event