网页获取鼠标位置
请看一段代码:
var _mouseX,_mouseY;
function initMouseMove()
{
if(!document.all)
{
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = mouseMove;
}
function mouseMove(e)
{
if(!document.all)
{
_mouseX=e.pageX;
_mouseY=e.pageY;
}
else
{
_mouseX=document.body.scrollLeft+event.clientX;
_mouseY=document.body.scrollTop+event.clientY;
}
}
获取鼠标位置显示图片。当我拉动滚动条时,x,y坐标位置就不对了,请问需要怎么改正?
------解决方案--------------------是不是有iframe
------解决方案--------------------获取鼠标移动信息
第一我们需要获取鼠标的坐标.我们加一个用户函数到document.onmousemove就可以了:
document.onmousemove = mouseMove;
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
}
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
点击这里运行代码
你首先要声明一个evnet对象.不论何时你移动鼠标/点击/按键等等,会对应一个event的事件.在Internet Explorer里event是全局变量,会被存储在window.event里. 在firefox中,或者其他浏览器,event事件会被相应的自定义函数获取.当我们将mouseMove函数赋值于document.onmousemove,mouseMove会获取鼠标移动事件.
(ev = ev || window.event) 这样让ev在所有浏览器下获取了event事件,在Firefox下 "||window.event "将不起作用,因为ev已经有了赋值.在MSIE下ev是空的,所以ev将设置为window.event.
因为我们在这篇文章中需要多次获取鼠标坐标,所以我们设计了mouseCoords这个函数,它只包含了一个参数,就是the event.
我们需要运行在MSIE与Firefox为首的其他浏览器下.Firefox以event.pageX和event.pageY来代表鼠标相应于文档左上角的位置.如果你有一个500*500的窗口,而且你的鼠标在正中间,那么paegX和pageY将是250,当你将页面往下滚动500px,那么pageY将是750.此时pageX不变,还是250.
MSIE和这个相反,MSIE将event.clientX与event.clientY来代表鼠标与ie窗口的位置,并不是文档.当我们有一个500*500的窗口,鼠标在正中间,那么clientX与clientY也是250,如果你垂直滚动窗口到任何位置,clientY仍然是250,因为相对ie窗口并没有变化.想得到正确的结果,我们必须加入scrollLeft与scrollTop这两个相对于文档鼠标位置的属性.最后,由于MSIE并没有0,0的文档起始位置,因为通常会设置2px的边框在周围,边框的宽度包含在document.body.clientLeft与clientTop这两个属性中,我们再加入这些到鼠标的位置中.
很幸运,这样mouseCoords函数就完成了,我们不再为坐标的事操心了.
以下是得到X和Y
mousePos.x;
mousePos.y;
------解决方案--------------------event.clientX
event.clientY
新手,不知可以不可以.
------解决方案--------------------有iframe的话要把parent的scrollTop也算上