The onmousedown
property of the GlobalEventHandlers
mixin is an EventHandler
that processes mousedown
events.
The mousedown
event fires when the user depresses the mouse button.
Note: The opposite of onmousedown
is onmouseup
.
Syntax
target.onmousedown = functionRef;
Value
functionRef
is a function name or a function expression. The function receives a MouseEvent
object as its sole argument.
Example
This example reveals part of an image when you press and hold a mouse button. It uses the onmousedown
, onmouseup
, and onmousemove
event handlers.
HTML
<div class="container"> <div class="view" hidden></div> <img src="https://udn.realityripple.com/samples/90/a34a525ace.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;
Result
Specification
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'onmousedown' in that specification. |
Living Standard |
Browser compatibility
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.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
onmousedown | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
See also
mousedown
event