The onmousemove property returns the mousemove
event handler code on the current element.
Syntax
element.onmousemove = event handling code
Notes
The mousemove
event is raised when the user moves the mouse.
Examples
Example #1: tooltips
The following example shows the use of the onmousemove
event with a javaScript tooltip.
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Tooltip Example</title> <script type="text/javascript"> var oTooltip = new (function() { var nOverX, nOverY, nLeftPos, nTopPos, oNode, bOff = true; this.follow = function (oMsEvnt1) { if (bOff) { return; } var nMoveX = oMsEvnt1.clientX, nMoveY = oMsEvnt1.clientY; nLeftPos += nMoveX - nOverX; nTopPos += nMoveY - nOverY; oNode.style.left = nLeftPos + "px"; oNode.style.top = nTopPos + "px"; nOverX = nMoveX; nOverY = nMoveY; }; this.remove = function () { if (bOff) { return; } bOff = true; document.body.removeChild(oNode); }; this.append = function (oMsEvnt2, sTxtContent) { oNode.innerHTML = sTxtContent; if (bOff) { document.body.appendChild(oNode); bOff = false; } var nScrollX = document.documentElement.scrollLeft || document.body.scrollLeft, nScrollY = document.documentElement.scrollTop || document.body.scrollTop, nWidth = oNode.offsetWidth, nHeight = oNode.offsetHeight; nOverX = oMsEvnt2.clientX; nOverY = oMsEvnt2.clientY; nLeftPos = document.body.offsetWidth - nOverX - nScrollX > nWidth ? nOverX + nScrollX + 10 : document.body.offsetWidth - nWidth + 16; nTopPos = nOverY - nHeight > 6 ? nOverY + nScrollY - nHeight - 7 : nOverY + nScrollY + 20; oNode.style.left = nLeftPos + "px"; oNode.style.top = nTopPos + "px"; }; this.init = function() { oNode = document.createElement("div"); oNode.className = "tooltip"; oNode.style.position = "absolute"; }; })(); </script> <style type="text/css"> div.tooltip { padding: 6px; background: #ffffff; border: 1px #76808C solid; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; z-index: 9999; } </style> </head> <body onload="oTooltip.init();"> <p><a href="https://developer.mozilla.org/" onmouseover="oTooltip.append(event,'Example text 1');" onmousemove="oTooltip.follow(event);" onmouseout="oTooltip.remove();">Move your mouse here…</a></p> <p><a href="https://developer.mozilla.org/" onmouseover="oTooltip.append(event,'Example text 2');" onmousemove="oTooltip.follow(event);" onmouseout="oTooltip.remove();">…or here!!</a></p> </body> </html>
Example #2: draggable elements
The following example shows the use of the onmousemove
event with draggable objects.
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Draggable elements</title> <script type="text/javascript"> (function () { var oActive, nMouseX, nMouseY, nStartX, nStartY, bMouseUp = true, nZFocus = /* the highest z-Index present in your page plus 1: */ 100; document.onmousedown = function (oPssEvt1) { var bExit = true, oMsEvent1 = oPssEvt1 || /* IE */ window.event; for (var iNode = oMsEvent1.target || /* IE */ oMsEvent1.srcElement; iNode; iNode = iNode.parentNode) { if (iNode.className === "draggable") { bExit = false; oActive = iNode; break; } } if (bExit) { return; } bMouseUp = false; nStartX = nStartY = 0; for (var iOffPar = oActive; iOffPar; iOffPar = iOffPar.offsetParent) { nStartX += iOffPar.offsetLeft; nStartY += iOffPar.offsetTop; } nMouseX = oMsEvent1.clientX; nMouseY = oMsEvent1.clientY; oActive.style.zIndex = nZFocus++; return false; }; document.onmousemove = function (oPssEvt2) { if (bMouseUp) { return; } var oMsEvent2 = oPssEvt2 || /* IE */ window.event; oActive.style.left = String(nStartX + oMsEvent2.clientX - nMouseX) + "px"; oActive.style.top = String(nStartY + oMsEvent2.clientY - nMouseY) + "px"; }; document.onmouseup = function () { bMouseUp = true; }; })(); </script> <style type="text/css"> .draggable { position: fixed; left: 0; top: 0; width: auto; height: auto; cursor: move; } #myDiv { width: 300px; height: 200px; left: 200px; top: 200px; background-color: #00ff00; } </style> </head> <body> <div class="draggable" id="myDiv"><p>Hello world!</p></div> <div class="draggable" style="background-color:#aaaaaa;">Another hello world!</div> </body> </html>
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of 'onmousemove' in that specification. |
Living Standard |