演示

Question

此代码应检查鼠标的位置，如果鼠标单击在控制台中显示了X和Y的位置，但是它忽略了click事件并在控制台中打印了鼠标的坐标鼠标没有点击。

我该如何解决？

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
       return {
         x: evt.clientX - rect.left,
         y: evt.clientY - rect.top
       };
}
canvas.addEventListener('mousemove', function(evt) {
       var mousePos = getMousePos(canvas, evt);
       canvas.addEventListener("click", check(mousePos.x,mousePos.y));
}, false);
function check(x,y){
    console.log(x);
}

Answer 1

在这种情况下，最好避免嵌套eventListeners。
另外，您可以将光标位置存储为canvas.mouse属性：

var canvas = document.querySelector('canvas');

canvas.addEventListener('mousemove', getMousePos);
canvas.addEventListener("click", check);

function getMousePos(evt) {
  var rect = canvas.getBoundingClientRect();
  canvas.mouse = {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

function check() {
  console.log(canvas.mouse.x);
}

canvas {
  width: 200px;
  height: 200px;
  background: #ddd
}

<canvas></canvas>

Answer 2

，但它忽略了click事件，并在控制台中打印了没有单击的鼠标坐标。我该如何解决？

之所以这样做是因为mousemove会在您将鼠标移到画布内时触发，并且此行：

canvas.addEventListener("click", check(mousePos.x,mousePos.y));

正在调用check()函数，这就是为什么无需单击即可打印的原因。

在提供回调时，请注意不要使用()，因为这会调用该函数，返回的内容将成为回调，而是提供函数的名称。

canvas.addEventListener("click", check);

由于您希望它在点击时打印鼠标位置，因此您不一定需要mousemove，一个简单的click事件就足够了

演示

var canvas = document.querySelector('canvas');
canvas.addEventListener("click", function(e) {
  console.log('X:' + e.clientX, 'Y:' + e.clientY);
});

canvas {
  width: 200px;
  height: 200px;
  background: dodgerblue;
}

<canvas></canvas>

检查鼠标点击

2 个答案:

演示