JavaScript事件类型：鼠标事件之Event的属性：光标位置

１、clientX属性与clientY属性

鼠标事件都是在浏览器窗口中的特定位置上发生的，这两个属性的值保存了事件发生时鼠标光标在窗口中的水平和垂直位置。

测试代码：

<div style='height:1500px;width:2500px'>
    <span style='position:fixed;top:10px;left:10px;'></span>
</div>

var span=document.getElementsByTagName('span')[0]
document.addEventListener('mousemove',function(event){
    var x=event.clientX;
    var y=event.clientY;
    span.innerHTML='X:'+x+',Y:'+y;
})

*clientX和clientY的属性值不包括页面滚动的距离。

2、pageX属性与pageY属性

这两个属性表示鼠标光标在页面中的位置，因此坐标是从页面本身而非窗口的左边和顶边计算的。

测试代码：

<div style='height:1500px;width:2500px'>
    <span style='position:fixed;top:10px;left:10px;'></span>
</div>

var span=document.getElementsByTagName('span')[0]
document.addEventListener('mousemove',function(event){
    var x=event.pageX;
    var y=event.pageY;
    span.innerHTML='X:'+x+',Y:'+y;
})

*在页面没有滚动的情况下，pageX和pageY的值与clientX和clientY的值相等。

IE8及更早的版本不支持pageX和pageY属性，不过使用clientX和clientY的值和滚动信息可以计算出来。这时候需要用到document.body（混杂模式）或document.documentEelement（标准模式）中的scrollLeft和scrollTop属性。

代码如下：

<div style='height:1500px;width:2500px'>
    <span style='position:fixed;top:10px;left:10px;'></span>
</div>

var EventUtil = {
    addHandler: function(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent('on' + type, handler);
        } else {
            element['on' + type] = handler;
        }
    },
    getEvent:function(event){ 
        return event?event:window.event;
    }
}

var span=document.getElementsByTagName('span')[0]
EventUtil.addHandler(document,'mousemove',function(event){
    event=EventUtil.getEvent(event);
    var pageX=event.pageX;
    var pageY=event.pageY;
    if(pageX==undefined||pageY==undefined){
        var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        pageX=event.clientX+scrollLeft;
        pageY=event.clientY+scrollTop;
    }
    span.innerHTML='X:'+pageX+',Y:'+pageY;
})

３、screenX属性与screenY属性

鼠标事件发生时鼠标光标相对于整个屏幕的坐标信息。

测试代码：

<div style='height:1500px;width:2500px'>
    <span style='position:fixed;top:10px;left:10px;'></span>
</div>

var span=document.getElementsByTagName('span')[0]
document.addEventListener('mousemove',function(event){
    var x=event.screenX;
    var y=event.screenY;
    span.innerHTML='X:'+x+',Y:'+y;
}

文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。