(Firefox) Javascript mousemove не то же самое, что jQuery mousemove

Question

Я создал виджет jquery, который позволяет мне прикреплять его к холсту и записывать чертежи, которые создает пользователь.

У меня проблема с Firefox, где событие, запущенное jQuery, не работает; но работает собственное javascript-событие.

JSFiddle проблемы: http://jsfiddle.net/sk6N5/8/

Я могу рисовать в canvas1, но не в canvas2. Я не знаю, почему рисунок немного выключен; но в моем собственном виджете работает как ожидалось (так что это не имеет значения).

Это ошибка в jQuery или мне нужно использовать ее по-другому? (Я действительно хочу использовать jQuery из-за пространства имен имен).

Мой JavaScript:

document.getElementById("canvas1").addEventListener("mousemove", function(event){ 
    self = this; 
    draw(event, self); 
}); 

$("#canvas2").on("mousemove", function(event){ 
    self = this; 
    draw(event, self); 
}); 

function draw(ev, canvas){ 
    var x, y; 
    if (ev.layerX || ev.layerX == 0) { 
     x = ev.layerX; 
     y = ev.layerY; 
    } else if (ev.offsetX || ev.offsetX == 0) { 
     x = ev.offsetX; 
     y = ev.offsetY; 
    } 

    var context = canvas.getContext('2d'); 

    console.log(ev, x, y); 
    if (x === undefined || y === undefined) return; 
    context.fillStyle = "rgb(0,255,255)"; 
    context.lineTo(x, y); 
    context.stroke(); 
} 

Answer 1

Проблема

В JQuery, события не имеют layerX и layerY свойства, потому что $.event.props.layerX и $.event.props.layerY были removed (и до работал только в браузерах, которые поддерживают event.layerX и event.layerY).

И у них есть только offsetX и offsetY свойства в браузерах, которые их поддерживают. Было a ticket, чтобы сделать их доступными для Firefox тоже, но был закрыт как wontfix из-за соображений производительности.

Solutions

• Читать layerX и layerY из event.originalEvent

• Вычислить компенсирующим вручную с помощью JQuery:

  if(typeof event.offsetX === "undefined" || typeof event.offsetY === "undefined") { 
      var targetOffset = $(event.target).offset(); 
      event.offsetX = event.pageX - targetOffset.left; 
      event.offsetY = event.pageY - targetOffset.top; 
  } 
  

• Вычислить смещает вручную с JavaScript. Чтобы найти положение целевого элемента, вы можете использовать this code.