.onmousemove

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onmousemove

現在の要素上のonmousemoveイベントハンドラのコードを返します。また、現在の要素に対してonmousemoveイベントハンドラの関数を割り当てます。

文法

element.onmousemove = function;

注意事項

mousemoveイベントは、ユーザーがマウスを動かした際に発生します。

例

例1: ツールチップ

下記は、JavaScriptのツールチップによるonmousemoveの使用例になります。

<!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="http://developer.mozilla.org/" onmouseover="oTooltip.append(event,'Example text 1');" onmousemove="oTooltip.follow(event);" onmouseout="oTooltip.remove();">Move your mouse here&hellip;</a></p>
<p><a href="http://developer.mozilla.org/" onmouseover="oTooltip.append(event,'Example text 2');" onmousemove="oTooltip.follow(event);" onmouseout="oTooltip.remove();">&hellip;or here!!</a></p>
</body>
</html>

例2: ドラッグ可能な要素

下記は、ドラッグ可能な要素によるonmousemoveイベントの使用例になります。

<!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>

実際に動作しているサンプルを確認することが出来ます。 Draggable elements

仕様

DOMレベル0。仕様の一部ではありません。

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

特定のブラウザに特化しすぎている情報やあまりにも古い情報、または試験的に導入されているようなAPIや機能については、省略していることがあります。
例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。