1.PageX/PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
2.clientX/clientY:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.
可是悲剧的是,PageX只有FF特有,IE这个悲剧没有啊T_T,所以大牛们想出了一个办法
PageY=clientY+scrollTop-clientTop(只讨论Y轴,X轴同理,下同)
3.screenX/screenY：鼠标在屏幕上的位置,从屏幕左上角开始（w3c标准）
4.offsetX/offsetY:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值
5.
layerX/layerY：FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点也就是当触发元素设置了相对或者绝对定位后,layerX和offsetX就幸福地生活在一起^-^,几乎相等,唯一不同就是一个从border为参考点,一个以内容为参考点
chrome和safari一条龙通杀!完全支持所有属性.其中(offsetX和layerX都是以border为参考点)
下面这个是获取相对于屏幕的坐标
document.onmousemove=function(e){e=e? e:window.eventdocument.writeln("X:"+e.screenX+"Y:"+e.screenY)}
有两种方法1. 用组件的title属性, 这个是HTML中自带的提示属性, 当鼠标停留在组件上的时候, 就会弹出提示, 比如<div title="小明">name</div>, 当鼠标停留在div上的时候, 就会有一个小黄框, 显示"小明".
2.上面的提示框很不好看, 而且功能很固定, 所以你可以在组建上加一个onmouseover的事件, 记录鼠标的位置, 我写了一个例子, 你看看是不是你需要的:
<script>
var mouseX
var mouseY
function showName() {
var infoDiv = document.getElementById('infoDiv')
infoDiv.innerHTML = 'This is the name!'
infoDiv.style.left = mouseX
infoDiv.style.top = mouseY
infoDiv.style.display = "block"
}
function mouseOver(obj) {
// 此处记录鼠标停留在组建上的时候的位置, 可以自己通过加减常量来控制离鼠标的距离.
mouseX = event.clientX
mouseY = event.clientY
}
</script>
<div onclick="showName()" onmouseover="mouseOver()" >Click here to display name.</div>
<!-- 用来显示名字的DIV, 根据需要可以修改格式和布局 -->
<div id="infoDiv" style="display: noneposition: absolutewidth: 100pxheight: 50pxbackground-color: #F1F19B"></div>
