Mouse 奇怪的鼠标事件位置问题
我有一个返回鼠标事件位置的函数Mouse 奇怪的鼠标事件位置问题,mouse,position,html5-canvas,Mouse,Position,Html5 Canvas,我有一个返回鼠标事件位置的函数 // returns the xy point where the mouse event was occured. function getXY(ev){ var xypoint = new Point(); if (ev.layerX || ev.layerY) { // Firefox xypoint.x = ev.layerX; xypoint.y = ev.layerY; } else if (ev.offsetX || ev.offsetX =
// returns the xy point where the mouse event was occured.
function getXY(ev){
var xypoint = new Point();
if (ev.layerX || ev.layerY) { // Firefox
xypoint.x = ev.layerX;
xypoint.y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
xypoint.x = ev.offsetX;
xypoint.y = ev.offsetY;
}
return xypoint;
}
我正在捕获鼠标事件以在html5画布上执行绘图。有时我会得到xypoint的-ve值。当我使用firebug调试应用程序时,我的行为非常奇怪。例如,如果我使用条件(xypoint.x将断点放在该函数的第4行,处理鼠标位置对Canvas来说绝对是一件痛苦的事情。你必须进行大量的调整。我使用这个函数,它有一些小错误,但即使在我的应用程序中使用拖放div时也能工作:
getCurrentMousePosition = function(e) {
// Take mouse position, subtract element position to get relative position.
if (document.layers) {
xMousePos = e.pageX;
yMousePos = e.pageY;
xMousePosMax = window.innerWidth+window.pageXOffset;
yMousePosMax = window.innerHeight+window.pageYOffset;
} else if (document.all) {
xMousePos = window.event.x+document.body.scrollLeft;
yMousePos = window.event.y+document.body.scrollTop;
xMousePosMax = document.body.clientWidth+document.body.scrollLeft;
yMousePosMax = document.body.clientHeight+document.body.scrollTop;
} else if (document.getElementById) {
xMousePos = e.pageX;
yMousePos = e.pageY;
xMousePosMax = window.innerWidth+window.pageXOffset;
yMousePosMax = window.innerHeight+window.pageYOffset;
}
elPos = getElementPosition(document.getElementById("cvs"));
xMousePos = xMousePos - elPos.left;
yMousePos = yMousePos - elPos.top;
return {x: xMousePos, y: yMousePos};
}
getElementPosition = function(el) {
var _x = 0,
_y = 0;
if(document.body.style.marginLeft == "" && document.body.style.marginRight == "" ) {
_x += (window.innerWidth - document.body.offsetWidth) / 2;
}
if(el.offsetParent != null) while(1) {
_x += el.offsetLeft;
_y += el.offsetTop;
if(!el.offsetParent) break;
el = el.offsetParent;
} else if(el.x || el.y) {
if(el.x) _x = el.x;
if(el.y) _y = el.y;
}
return { top: _y, left: _x };
}
故事的寓意?你需要计算画布的偏移量才能获得正确的结果。你正在从事件中捕获XY,该事件的偏移量与窗口的XY无关。有意义吗?谢谢你的回答,但这并没有解决我的问题。我获取XY位置的功能是给我正确的结果,即问题是,有时从事件到变量的赋值并没有发生。啊,我明白了。在两种浏览器中都会丢失赋值吗?