鼠标事件都是在browser中的特定位置发生的,而我们可以通过事件对象event的各种属性获取到鼠标事件发生的位置。
(1)客户区坐标位置
这一位置是相对于视口而言,所谓视口就是你所看到的browser展示页面的大小。不包括browser的菜单栏和滚动条覆盖的部分。
event.clientX;
event.clientY;
(2)页面坐标位置(IE8及以下不支持这一属性)
该坐标是相对于页面而言的,页面就是整个网页页面。它包括了滚动条覆盖的页面部分,也不包括browser菜单栏部分。
event.pageX;
event.pageY;
a.在无滚动条的情况下,clientX、clientY和pageX、pageY是相同的。
b.若在IE8及以下内想得出页面坐标,则可以使用滚动事件获取滚动信息和客户区坐标
var div=document.getElementById("div");
div.attachEvent('onclick',function(event){
var pageX=event.pageX;
var pageY=event.pageY;
if(pageX==='undefined'){
pageX=event.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft);
pageY=event.clientY+(document.body.scrollTop||document.document.documentElement.scrollTop);
}
})
(3)屏幕坐标
该坐标相对于屏幕左上角而言,也就是说和clientX、clientY相比多了browser的菜单栏部分。
event.screenX;
event.screenY
(4)layerX、layerY
这个属性用的相对少点,当元素是绝对定位时(position:absolute),相对于元素自身的左上角定位
event.layerX;
event.layerY;
!<–只是个人总结,如有不对的地方,请尽情喷哈哈哈哈哈–>