Question

如果我使用click事件来调用此函数，它可以正常工作：

canvas = document.getElementById("svg");

function relMouseCoords(event){
  var totalOffsetX = 0; //coordinates of corner of canvas
  var totalOffsetY = 0;
  var canvasX = 0;
  var canvasY = 0;
  var canvas = this; //what called the event

  do{
      totalOffsetX += canvas.offsetLeft - canvas.scrollLeft; //relative coordinates
      totalOffsetY += canvas.offsetTop - canvas.scrollTop;
  }
  while(canvas = canvas.offsetParent)

  canvasX = event.pageX - totalOffsetX;
  canvasY = event.pageY - totalOffsetY;

  point = {x:canvasX, y:canvasY};

  console.log(point.x + " " + point.y);

  return point; //object returned
}

但是当我尝试使用click事件通过此函数调用它时，它返回一个内部有两个NaN值的对象：

function drawRectangle(event){
  var startPoint;

  startPoint = relMouseCoords(event);

  console.log(startPoint);
}

有人可以向我解释为什么会这样吗？如果有修复的话？如果有人对此做出回应，我不想使用JQuery。

由于

Answer 1

原帖子的评论中回答了这个问题。只需删除var canvas = this;即可解决此问题。

通过另一个函数调用NaN响应的函数

1 个答案: