奇怪的鼠标事件位置问题

Question

我有一个返回鼠标事件位置的函数。

// 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 调试应用程序时，我得到了非常奇怪的行为。例如，如果我将断点放在该函数的第 4 行，条件为 (xypoint.x<0 || xypoint.y<0)，它会在断点处停止，我可以看到 layer.x、layer.y是积极且正确的。但 xypoint.x 或 xypoint.y 为负数。如果我使用 firbug 控制台重新分配值，我将在 xypoint 中获得正确的值。谁能解释一下发生了什么事。

如果我以正常速度移动鼠标，上述效果很好。如果我以非常快的速度移动鼠标，我就会出现这种行为。

谢谢

Answer 1

使用 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 的偏移量。有道理吗？