HTML5 с jQuery-e. offsetX не определен в 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 неопределены. Но от Огненный Жук, я не смог его найти. И даже я дал ему попробовать вот так:

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

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

EDIT

спасибо дистрою и вусану за помощь. Решение вопроса следует:

решение

$('#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);
});
5 58
jquery events html5 undefined-behavior

5 ответов:

попробуйте использовать 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;
19

использовать 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);
});
19

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

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

14

Это прекрасно работает в Firefox и других.

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

в Firefox на самом деле тутподдержкаMouseEvent.offsetX и MouseEvent.offsetY после выпуска 39.0, который выпущен в июля 2015 года.

0