window屬性：onmousemove

2018-05-16 10:57 更新

onmousemove屬性

該onmousemove屬性返回當(dāng)前元素的mousemove事件處理程序代碼。

onmousemove屬性語法

element.onmousemove = event handling code

筆記

當(dāng)用戶移動鼠標(biāo)時引發(fā)該mousemove事件。

onmousemove屬性示例

示例：工具提示

以下示例顯示了將onmousemove事件與javaScript工具提示一起使用的情況：

<!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  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  onmouseover="oTooltip.append(event,'Example text 1');" onmousemove="oTooltip.follow(event);" onmouseout="oTooltip.remove();">Move your mouse here&hellip;</a></p>
<p><a  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  onmouseover="oTooltip.append(event,'Example text 2');" onmousemove="oTooltip.follow(event);" onmouseout="oTooltip.remove();">&hellip;or here!!</a></p>
</body>
</html>

規(guī)范

規(guī)范狀態(tài)注釋
HTML Living Standard 
該規(guī)范中'onmousemove'的定義。
Living Standard
 

瀏覽器兼容性

我們正在將兼容性數(shù)據(jù)轉(zhuǎn)換為機(jī)器可讀的JSON格式。

  • 電腦端
特征Chrome
Edge
Firefox（Gecko）Internet Explorer
Opera
Safari（WebKit）
基本支持支持支持？？？？
  • 移動端
特征AndroidAndroid WebviewEdge
Firefox Mobile（Gecko）Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
基本支持？支持支持？？？？？支持
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號