Координаты мыши на холсте без Jquery

Question

Я сейчас использую:

e.pageX - $("#canvas").offset().left

Это единственное, для чего я использую Jquery, поэтому я бы предпочел переписать это, используя только javascript.

Что я могу использовать, чтобы заменить это?

Answer 1

Ответ, предоставленный Н. Ролером, хорошо работает только в Internet Explorer (с некоторыми ошибками до IE8 - но я думаю, это не будет проблемой для вас, поскольку вы используете canvas и pageX), а в Opera, еслиотступ - 0, и в Safari / Chrome, если ширина границы также равна 0.В Firefox, к сожалению, offsetX и offsetY не определены.http://www.quirksmode.org/dom/w3c_cssom.html#mousepos

Kaninepete, я думаю, вы должны пересмотреть, для простоты, способ получения координат мыши относительно вашего элемента canvas.Все, что вам нужно сделать, это вычислить положение холста, что является довольно простой задачей с использованием .getBoundingClientRect () (также не забудьте добавить смещения прокрутки, если это необходимо), и вычесть его из pageX и pageY.

Answer 2

var x = e.offsetX,
    y = e.offsetY;

Обновлено (еще раз) для (правильной) совместимости с Firefox:

var rect = e.target.getBoundingClientRect();
var x = e.offsetX || e.pageX - rect.left - window.scrollX,
    y = e.offsetY || e.pageY - rect.top - window.scrollY;

Answer 3

Вы можете заменить его кодом ниже

<canvas onmouseDown="mouseDown(event)" width="500" height="500"></canvas>


function mouseDown(e)
{
  var x=e.clientX-canvas.offsetLeft;
  var y=e.clientY-canvas.offsetTop; 
}