событие.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 координаты с учетом положения холста, преобразования и т. д.? Спасибо, Лука.
10 ответов
попробуйте layerX, layerY
var x = e.offsetX==undefined?e.layerX:e.offsetX;
var y = e.offsetY==undefined?e.layerY:e.offsetY;
С страница отслеживания ошибок JQuery - хороший polyfill это:
var offX = (e.offsetX || e.pageX - $(e.target).offset().left);
.. где e-событие, возвращаемое из события jquery. Очевидно, только если у вас есть Jquery уже на вашем проекте, иначе придется делать offset()
вещи вручную.
к сожалению, ни одно решение не сработало для меня.
Я нашел хорошую реализацию здесь:
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;
к сожалению, 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;
}
в решении Мусы есть ошибка: подумайте, что произойдет, если 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;
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;
}
}
ни одна из версий non-jquery не работает полностью по различным причинам. С вашей помощью, однако, я получил это на работу:
if(!event.hasOwnProperty('offsetX')) {
event.offsetX = event.layerX - event.currentTarget.offsetLeft;
event.offsetY = event.layerY - event.currentTarget.offsetTop;
}
Я обнаружил, что все ответы размещены здесь за исключением последние два ответа от 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, указанный в его сообщении, но я этого не пробовал.
но что вы будете делать, если нет 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;
}
если некоторым все еще нужны решения, этот работает идеально в Firefox:
var x = e.offsetX || e.originalEvent.layerX;
var y = e.offsetY || e.originalEvent.layerY;