题目内容

JavaScript 设计鼠标跟随

题目答案

■知识点

当事件发生时，利用事件对象的坐标属性可以获取鼠标指针的位置，说明如表所示。

属性	说明	兼容性
clientX	以浏览器窗口左上顶角为原点，定位x轴坐标	所有浏览器，不兼容Safari
clientY	以浏览器窗口左上顶角为原点，定位y轴坐标	所有浏览器，不兼容Safari
offsetX	以当前事件的目标对象左上顶角为原点，定位x轴坐标	所有浏览器，不兼容Mozilla
offsetY	以当前事件的Hi标对象左上顶角为原点，定位y轴坐标	所有浏览器，不兼容Mozilla
pagcX	以document对象（即文档窗口）左上顶角为原点，定位x轴坐标	所有浏览器，不兼容IE
pageY	以document对象（即文档窗口）左上顶角为原点，定位y轴坐标	所有浏览器，不兼容IE
screenX	计算机屏幕左上顶角为原点，定位x轴坐标	所有浏览器
screenY	计算机屏幕左上顶角为原点，定位y轴坐标	所有浏览器
layerX	最近的绝对定位的父元素（如果没有，则为document对象）左上顶角为原点，定位x轴坐标	Mozilla 和 Safari
layerY	最近的绝对定位的父元素（如果没有，则为document对象）左上顶角为原点，定位y轴坐标	Mozilla 和 Safari

■实例设计

设计一个函数，根据事件对象获取鼠标指针的坐标值，设置该对象为绝对定位，绝对定位的值为鼠标指针当前的坐标值。定义形参为：对象引用指针、相对鼠标指针的偏移距离以及事件对象。

var pos = function(o, x, y,event){ //鼠标指针定位赋值函数

var posX = 0, posY = 0; //临时变量值

var e = event || window.event; //标准化事件对象

if(e.pageX || e.pageY){ //获取鼠标指针的当前坐标值

posX = e.pageX;

posY = e.pageY;

}

else if(e.clientX |丨 e.clientY){

posX = e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;

posY = e.clientY + document.documentElement.scrollTop + document.body.scrollTop;

}

o.style.position = "absolute"; //定义当前对象为绝对定位

o.style.top = (posY + y) + "px"; //用鼠标指针的y轴坐标和传入偏移值设置对象y轴坐标

o.style.left = (posX + x) + "px"; //用鼠标指针的x轴坐标和传入偏移值设置对象x轴坐标

}

下面为document对象注册鼠标移动事件处理函数，并传入鼠标定位封装函数，传入的对象为<div>元素，设置其位置向鼠标指针右下方偏移（10,20)的距离。考虑到DOM事件模型通过参数形式传递事件对象，所以不要忘记在调用函数中还要传递事件对象。

var divl = document.getElementByld("divl");

document.onmousemove = function(event){

pos(divl, 10, 20,event);

}

</script>