jQuery가 포함 된 HTML5-e.offsetX가 Firefox에서 정의되지 않음

jQuery가 포함 된 HTML5-e.offsetX가 Firefox에서 정의되지 않음

---

내 HTML5 페이지에는 mousemove다음과 같은 이벤트 가있는 div가 있습니다.

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

Google 크롬에서 잘 작동합니다. 그러나 Firefox에서는 둘 다 가치를 제공합니다 undefined. Firebug를 사용하여 확인했습니다. 즉, e개체를 콘솔에 기록했습니다 . 모두 offsetX와 offsetY로 발견된다 undefined.

내가 구글에서 검색하면, 거기에 내가 사용한다라는 솔루션이었다 layerX그리고 layerY두 경우 offsetX와는 offsetY정의되지 않은 있습니다. 하지만 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에서 테스트 중입니다.

어떤 아이디어 나 제안?

---

편집하다

도와 주신 dystroy와 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);
});

---

사용해보십시오 layerX와 layerY파이어 폭스와 offsetX다른 브라우저.

이벤트가 jquery로 시작된 경우 :

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

자바 스크립트로 이벤트가 발생한 경우 :

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

---

사용 layerX및 layerYFF와 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);
});

---

originalEvent에 있기 때문에 찾지 못했습니다. 시도 : e.originalEvent.layerX e.originalEvent.layerY

pageX와 pageY에 대해 그들은 같은 것을 계산하지 않습니다. layerX는 첫 번째 상대 / 절대 상위에서 개체의 왼쪽입니다. pageX는 페이지에서 개체의 왼쪽입니다.

---

이것은 firefox 및 기타에서 잘 작동합니다.

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

---

파이어 폭스는 실제로 수행 지원 MouseEvent.offsetX 과 MouseEvent.offsetY에 출시되는 릴리스 39.0 이후 2015 년 7 월 .

참고URL : https://stackoverflow.com/questions/12704686/html5-with-jquery-e-offsetx-is-undefined-in-firefox