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);
}

标签： javascriptcanvasmouseevent

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>