Ви читаєте англійську версію цього вмісту, бо ще не існує перекладу для цієї мови. Допоможіть нам перекласти цю статтю!
The onmousemove
property of the GlobalEventHandlers
mixin is an EventHandler
that processes mousemove
events.
The mousemove
event fires when the user moves the mouse.
Syntax
target.onmousemove = functionRef;
Value
functionRef
is a function name or a function expression. The function receives a MouseEvent
object as its sole argument.
Examples
Tooltips
This example creates link tooltips that follow your mouse. It uses the onmousemove
, onmouseover
, and onmouseout
event handlers.
HTML
<p><a href="#" data-tooltip="First link">See a tooltip here …</a></p> <p><a href="#" data-tooltip="Second link">… or here!</a></p>
CSS
.tooltip { position: absolute; z-index: 9999; padding: 6px; background: #ffd; border: 1px #886 solid; border-radius: 5px; }
JavaScript
const tooltip = new (function() { const node = document.createElement('div'); node.className = 'tooltip'; node.setAttribute('hidden', ''); document.body.appendChild(node); this.follow = function(event) { node.style.left = event.clientX + 20 + 'px'; node.style.top = event.clientY + 10 + 'px'; }; this.show = function(event) { node.textContent = event.target.dataset.tooltip; node.removeAttribute('hidden'); }; this.hide = function() { node.setAttribute('hidden', ''); }; })(); const links = document.querySelectorAll('a'); links.forEach(link => { link.onmouseover = tooltip.show; link.onmousemove = tooltip.follow; link.onmouseout = tooltip.hide; });
Result
Draggable elements
We also have an example available showing the use of the onmousemove
event handler with draggable objects — view the example in action.
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'onmousemove' 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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
onmousemove | Chrome Full support Yes | Edge Full support Yes | 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
mousemove
event