javascript - 检查鼠标点击情况

Question

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

如何解决这个问题？

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

在这种情况下，最好避免嵌套 eventListener。
您还可以将光标位置存储为 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>