javascript学习指南|JavaScript event取得鼠标绝对位置

 代码如下

// 取X轴位置
function mouseX(evt) {
    // firefox
    if (evt.pageX) return evt.pageX;
    // IE
    else if (evt.clientX)
        return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    else return null;
}
// 取Y轴位置
function mouseY(evt) {
    // firefox
    if (evt.pageY) return evt.pageY;
    // IE
    else if (evt.clientY)
        return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    else return null;
}

例

 代码如下

function CPos(x, y)
{
    this.x = x;
    this.y = y;
}
//获取控件的位置
function GetObjPos(ATarget)
{
    var target = ATarget;
    var pos = new CPos(target.offsetLeft, target.offsetTop);
   
    var target = target.offsetParent;
    while (target)
    {
        pos.x += target.offsetLeft;
        pos.y += target.offsetTop;
       
        target = target.offsetParent
    }
   
    return pos;

}

测试

 代码如下

var pos = GetObjPos($id("t1"));
$id("div2").style.left = pos.x + "px";//"10px";
//$id("div2").style.top = pos.y * 1px;
$id("div2").style.top = pos.y + "px";

实例

 代码如下

words" content="">

<script language="JavaScript">

</script>
鼠标的绝对位置：




控件输入框txtPos的绝对位置：

X：

Y：

event位置属性的分析:

1. IE的event.x,event.y是以事件触发元素的父元素外界为参考点(不包括滚动距离)
2. Firefox的event.pageX,event.pageY是以body元素为参考点(包括滚动距离)
3. event.clientX,event.clientY以浏览器左上角为参考点(不包括滚动距离)
4. IE的event.offsetX,event.offsetY和Firefox的event.layerX,event.layerY以事件触发元素内界的左上角为参考点(包括滚动距离,当有边框时,可能出现负数)

javascript学习指南|JavaScript event取得鼠标绝对位置

http://m.bbyears.com/wangyetexiao/36914.html

推荐访问: