検索結果

GlobalEventHandlers.onmousemove

この記事内

構文
注釈
例
1. 例1: ツールチップ
2. 例2: 要素のドラッグ
仕様

onmousemoveプロパティは、当該要素のmousemoveイベントハンドラのコードを返します。

構文

element.onmousemove = イベントを扱うコード

注釈

mousemoveイベントは、ユーザーがマウスポインタを動かすと起こります。

例

例1: ツールチップ

つぎの例は、JavaScriptツールチップにonmousemoveイベントを使っています。

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ツールチップの例</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&hellip;</a></p>
<p><a href="https://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>要素のドラッグ</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>

この例の動きを見る。

仕様

DOM Level 0。仕様には含まれない。

ドキュメントのタグと貢献者

タグ:

このページの貢献者: FumioNonaka

最終更新者: FumioNonaka, 2015/08/13 8:29:14