HTML5 с jQuery - e.offsetX undefined в Firefox

На моей странице HTML5 у меня есть div с событием mousemove следующим образом:

$('#canvas').mousemove(function(e){
    xpos = e.offsetX;
    ypos = e.offsetY;
    $('#mouse').html("X : " + xpos + " ; Y : " + ypos);
});

Он отлично работает с Google Chrome. Но в Firefox оба значения дают undefined. Я проверил его с помощью Firebug, то есть зарегистрировал объект e для консоли. Обнаружено, что offsetX и offsetY undefined.

Когда я искал в Google, было решение, что я должен использовать layerX и layerY, если оба offsetX и offsetY являются undefined. Но от Firebug я не смог его найти. И даже я дал ему попробовать вот так:

xpos = (e.offsetX==undefined)?e.layerX:e.offsetX;
ypos = (e.offsetY==undefined)?e.layerY:e.offsetY;

Но это также дает undefined как значения.

Я использую самый последний jQuery - v1.8.2. И я тестирую в своем Firefox v14.0.1

Любые идеи или предложения?

ИЗМЕНИТЬ

Благодаря дистрой и vusan за помощь мне. Решение вышеупомянутой проблемы выглядит следующим образом:

Решение

$('#canvas').mousemove(function(e){
  $('#cursor').show();
  if(e.offsetX==undefined) // this works for Firefox
  {
    xpos = e.pageX-$('#canvas').offset().left;
    ypos = e.pageY-$('#canvas').offset().top;
  }             
  else                     // works in Google Chrome
  {
    xpos = e.offsetX;
    ypos = e.offsetY;
  }
  $('#mouse').html("X : " + xpos + " ; Y : " + ypos);
});

Ответы

Ответ 1

Попробуйте использовать layerX и layerY для Firefox и offsetX для другого браузера.

Если событие запущено с помощью jquery:

xpos = e.offsetX === undefined ? e.originalEvent.layerX : e.offsetX;
ypos = e.offsetY === undefined ? e.originalEvent.layerY : e.offsetY;

Если событие запущено с помощью javascript:

xpos = e.offsetX==undefined?e.layerX:e.offsetX;
ypos = e.offsetY==undefined?e.layerY:e.offsetY;

Ответ 2

Используйте layerX и layerY в FF и offsetX и offsetY во всех других браузерах.

$('#canvas').mousemove(function(e){
  xpos = e.offsetX === undefined ? e.originalEvent.layerX : e.offsetX;
  ypos = e.offsetY === undefined ? e.originalEvent.layerY : e.offsetY;

  $('#mouse').html("X : " + xpos + " ; Y : " + ypos);
});

Ответ 3

Вы не нашли их, потому что это в оригинале. пытаться: e.originalEvent.layerX e.originalEvent.layerY

О страницеX и страницеY они не вычисляют одно и то же. layerX - это левый объект от первого относительного/абсолютного родителя. pageX - слева от объекта со страницы.

Ответ 4

Это отлично работает в firefox и других.

var offsetRequired = (e.offsetX || e.pageX - $(e.target).offset().left);