有两种方法
1 用组件的title属性, 这个是HTML中自带的提示属性, 当鼠标停留在组件上的时候, 就会d出提示, 比如<div title="小明">name</div>, 当鼠标停留在div上的时候, 就会有一个小黄框, 显示"小明"
2上面的提示框很不好看, 而且功能很固定, 所以你可以在组建上加一个onmouseover的事件, 记录鼠标的位置, 我写了一个例子, 你看看是不是你需要的:
<script>
var mouseX;
var mouseY;
function showName() {
var infoDiv = documentgetElementById('infoDiv');
infoDivinnerHTML = 'This is the name!';
infoDivstyleleft = mouseX;
infoDivstyletop = mouseY;
infoDivstyledisplay = "block";
}
function mouseOver(obj) {
// 此处记录鼠标停留在组建上的时候的位置, 可以自己通过加减常量来控制离鼠标的距离
mouseX = eventclientX;
mouseY = eventclientY;
}
</script>
<div onclick="showName()" onmouseover="mouseOver()" >Click here to display name</div>
<!-- 用来显示名字的DIV, 根据需要可以修改格式和布局 -->
<div id="infoDiv" style="display: none; position: absolute; width: 100px; height: 50px; background-color: #F1F19B;"></div>
出于安全性考虑和浏览器限制,js不能够设置鼠标的位置,如果提供此项功能,那岂不是在网页上就能控制用户的鼠标移动,这是不能被允许的。
只能够获取鼠标的位置,而不能设置鼠标的位置。
在文档最后加上这句!
documentgetElementById('pos')onmouseover=function(e)
{e=e||windwevent;
alert(eclientX+":"+eclientY);}
附上代码:
<!DOCTYPE html>
<html>
<head>
<script>
function mousePosition(evt){
evt = evt || windowevent;
var xPos = evtpageX || evtclientX || evtoffsetX || evtx;
var yPos = evtpageY || evtclientY || evtoffsetY || evty;
return [xPos, yPos];
}
function moveWindow (e) {
documentonmousemove = function(e){
resultinnerHTML = mousePosition(e);
};
}
onload = moveWindow;
</script>
</head>
<body>
<div id="result">
<!-- 展示结果 -->
</div>
</body>
</html>
以上就是关于求JS获得当前鼠标的位置坐标的方法全部的内容,包括:求JS获得当前鼠标的位置坐标的方法、js 可不可以设置鼠标坐标为某一特定位置、js 取得鼠标位置等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)