addEventListener mousemove on 文档准备好

Question

我想是新手问题。

以下代码是我在文档就绪时调用的函数的一部分。它旨在在鼠标移动时永久返回当前鼠标位置的值。

正在发生的奇怪事情：在文档就绪时移动鼠标不会将任何内容记录到控制台。我知道 mouse_monitor 函数可以工作，因为我在另一个“mousedown”事件监听器中使用了这个函数，然后它将当前鼠标位置记录到控制台。

//Mouse Monitor

    canvas.addEventListener('mousemove', mouse_monitor, false);


//Mouse Monitor Request
    var mouse = new Array();
    var mouse_monitor = function(e) {
        var canvasOffset=$("#canvas").offset();
        var offsetX=canvasOffset.left;
        var offsetY=canvasOffset.top;
        mouse.x = e.pageX - offsetX;
        mouse.y = e.pageY - offsetY;
        return mouse;
        console.log(mouse);
    }

Answer 1

return mouse;

该行之后的任何语句都不会被执行。

好的，然后让一些东西工作起来并增量地添加/修改它：

var mouse_monitor = function(e) {
  var x = e.pageX;
  var y = e.pageY;
  console.log(x, y);
}

window.onload = function() {
  this.addEventListener('mousemove', mouse_monitor);
}

但是你提到了“文档就绪”，所以如果你使用jquery，你应该避免使用 addEventListener() 因为它不是跨浏览器的：

var mouse_monitor = function(e) {
  var x = e.pageX;
  var y = e.pageY;
  console.log(x, y);
}

$(document).ready( function() {
  $(this).on('mousemove', mouse_monitor);
});

另一种方法是 console.log() 导致失败代码的所有变量及其值，以确定哪些值不正确。