событие.offsetX в Firefox

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script language="javascript">
function main(){
    var canvas = document.getElementById("canvas");
    canvas.addEventListener("mousemove", function(e){
        if (!e) e = window.event;
        var ctx = canvas.getContext("2d");

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

        ctx.fillRect(x, y, 1, 1);
    });
}
</script>
</head>
<body onload="main();">
<div style="width: 800px; height: 600px; -webkit-transform: scale(0.75,0.75); -moz-transform: scale(0.75,0.75)">
    <canvas id="canvas" width="400px" height="400px" style="background-color: #cccccc;"></canvas>
</div>
</body>
</html>

пожалуйста, рассмотрите приведенный выше быстрый и грязный пример. Обратите внимание,что мой холст содержится в div с масштабным преобразованием. Приведенный выше код отлично работает в любом браузере на основе webkit. При перемещении мыши рисует точки на холсте. К сожалению, это не так в Firefox, поскольку его модель событий не поддерживает свойства offsetX / Y. Как я могу преобразовать координаты мыши из (возможно) события.clientX (который также поддерживается в firefox) в Canvas relative координаты с учетом положения холста, преобразования и т. д.? Спасибо, Лука.

42
events firefox html5 html5-canvas javascript

10 ответов

попробуйте layerX, layerY

var x = e.offsetX==undefined?e.layerX:e.offsetX;
var y = e.offsetY==undefined?e.layerY:e.offsetY;

скрипка

32

С страница отслеживания ошибок JQuery - хороший polyfill это:

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

.. где e-событие, возвращаемое из события jquery. Очевидно, только если у вас есть Jquery уже на вашем проекте, иначе придется делать offset() вещи вручную.

77

к сожалению, ни одно решение не сработало для меня.

Я нашел хорошую реализацию здесь:

var target  = e.target || e.srcElement,
              rect    = target.getBoundingClientRect(),
              offsetX = e.clientX - rect.left,
              offsetY  = e.clientY - rect.top;

e.offsetX   = offsetX;
e.offsetY   = offsetY;
19

к сожалению, offsetX и layerX не совсем то же самое, что offsetX-смещение внутри текущего элемента, но layerX-смещение от страницы. Ниже приведено исправление, которое я в настоящее время использую для этого:

function fixEvent(e) {
    if (! e.hasOwnProperty('offsetX')) {
        var curleft = curtop = 0;
        if (e.offsetParent) {
           var obj=e;
           do {
              curleft += obj.offsetLeft;
              curtop += obj.offsetTop;
           } while (obj = obj.offsetParent);
        }
        e.offsetX=e.layerX-curleft;
        e.offsetY=e.layerY-curtop;
    }
    return e;
}
15

в решении Мусы есть ошибка: подумайте, что произойдет, если e.offsetX === 0 и e.layerX === undefined...

var x = e.offsetX || e.layerX; // x is now undefined!

более надежная версия выглядит следующим образом:

var x = e.hasOwnProperty('offsetX') ? e.offsetX : e.layerX;
var y = e.hasOwnProperty('offsetY') ? e.offsetY : e.layerY;

или, потому что мы можем предположить, что если offsetX определяется offsetY будет слишком:

var hasOffset = e.hasOwnProperty('offsetX'),
    x         = hasOffset ? e.offsetX : e.layerX,
    y         = hasOffset ? e.offsetY : e.layerY;
11

offset фактически не переводится непосредственно в layer; the offset свойство не учитывает маржу элемента. Код ниже должен учитывать это.

function(e) {
    var x = e.offsetX, y = e.offsetY;
    if(e.hasOwnProperty('layerX')) {
      x = e.layerX - e.currentTarget.offsetLeft;
      y = e.layerY - e.currentTarget.offsetTop;
    }
}
4

ни одна из версий non-jquery не работает полностью по различным причинам. С вашей помощью, однако, я получил это на работу:

if(!event.hasOwnProperty('offsetX')) {
    event.offsetX = event.layerX - event.currentTarget.offsetLeft;
    event.offsetY = event.layerY - event.currentTarget.offsetTop;
}
3

Я обнаружил, что все ответы размещены здесь за исключением последние два ответа от EnotionZ и laz brannigan (ранее с нулевыми голосами каждый), где неправильно в случаях, когда несколько элементов содержались в div. В моем случае у меня есть несколько элементов холста внутри одного div, и я слушаю каждый холст отдельно.

после значительных проб и ошибок окончательный правильный ответ, к которому я пришел, который отлично работает для меня в FireFox и Chrome следующим образом:

//inside my mouse events handler:
var anOffsetX = (inEvent.offsetX !== undefined) ? inEvent.offsetX : (inEvent.layerX - inEvent.target.offsetLeft);
var anOffsetY = (inEvent.offsetY !== undefined) ? inEvent.offsetY : (inEvent.layerY - inEvent.target.offsetTop);

предположительно это также будет работать для полей и таких, как EnotionZ, указанный в его сообщении, но я этого не пробовал.

3

но что вы будете делать, если нет layerX,layerY полей ?

 var xe=e.offsetX,ye=e.offsetY;
  if(!xe){
     xe=e.clientX - $(e.target).offset().left;
  }
  if(!ye){
    ye= e.clientY - $(e.target).offset().top;
  }
2

если некоторым все еще нужны решения, этот работает идеально в Firefox:

var x = e.offsetX || e.originalEvent.layerX;
var y = e.offsetY || e.originalEvent.layerY;
0