Проверьте щелчок мышью - PullRequest
Новая
       9

Проверьте щелчок мышью

0 голосов
/ 27 октября 2018

Этот код должен проверять положение мыши, и если щелчки мыши показывают это 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);
}

Ответы [ 2 ]

0 голосов
/ 27 октября 2018

, но он игнорирует событие щелчка и печатает в консоли коринады мыши без щелчка.Как это исправить?

Это происходит из-за того, что mousemove срабатывает всякий раз, когда вы перемещаете мышь внутри холста, и эта строка: 

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

вызываетфункция check(), поэтому печатает без щелчка.

в качестве дополнительного примечания при предоставлении обратного вызова не используйте (), потому что это вызывает функцию, и все, что она возвращает, станет обратным вызовомвместо этого вы указываете имя функции. 

canvas.addEventListener("click", check);

Поскольку вы хотите, чтобы он печатал позицию мыши при щелчке, вам не обязательно нужен mousemove, достаточно простого события щелчка

DEMO 

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>
0 голосов
/ 27 октября 2018

В этом случае лучше избегать вложенных 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>
...