Форум

Magneto · #1 (**permalink**) 20.04.2011, 08:15

Для того чтоб узнать координаты клика на объекте я написал следующий код:

document.getElementById('test').addEventListener('click', function(event){alert(event.offsetX +'x'+ event.offsetY)}, false)

Работает в браузерах Chrome, Opera, IE9, Safari, а вот FireFox 4.0 возвращает undefined.
Пробовал:
clientX, clientY
layerX, layerY
screenX, screenY
x, y
все эти свойства возвращают координаты относительно документа либо undefined.

Что ещё попробовать?

Aetae · #2 (**permalink**) 20.04.2011, 08:21

http://javascript.ru/tutorial/events...entx-y-pagex-y

Magneto · #3 (**permalink**) 20.04.2011, 08:44

Спасибо за ссылку но это тыканье "пальцем в небо".

Возможно есть нативные свойства для FireFox о которых я не знаю.

Kolyaj · #4 (**permalink**) 20.04.2011, 09:15

Magneto,
где вы там тыканье пальцем в небо увидели?

рони · #5 (**permalink**) 20.04.2011, 09:38

Magneto,
Вариант координаты элемента вычесть из координат мыши относительно документа Координаты элемента на странице

Magneto · #6 (**permalink**) 21.04.2011, 17:08

После нескольких опытов вот к чему я пришел:

<html><head>
<style type="text/css">
#el{
  width:200px;
  height:70px;
  position:relative;
  top:20px;
  left:50px;
  background:#555}
</style>
</head><body>
  <div id="el"></div>
<script type="text/javascript">
var el = document.getElementById('el');
    el.addEventListener('click', getClickXY, false);
function getClickXY(event)
  {
    var clickX = (event.layerX == undefined ? event.offsetX : event.layerX) + 1;
    var clickY = (event.layerY == undefined ? event.offsetY : event.layerY) + 1;
    alert('Координаты клика: '+ clickX +' x '+ clickY);
  }
</script>
</body></html>

Элемент страницы по которому кликает пользователь и относительно которого нужно узнать координаты клика, должен иметь css-свойство z-index отличное от 0 (нуля). Это связано с тем что javascript-свойство layerX(Y) вычисляется для активного слоя. В Opera это свойство не работает, поэтому для нее берется свойство offsetX(Y). +1 добавляется к каждому свойству потому что отсчет координат начинается с 0, то есть самая первая точка имеет координаты 0х0.
В css свойство z-index больше 0 имеют все элементы для которых position указано как relative | absolute | fixed.

рони · #7 (**permalink**) 21.04.2011, 18:02

Magneto,
Mozilla Firefox ---> getClickXY(event)
IE ---> el.attachEvent('onclick',getClickXY)

Magneto · #8 (**permalink**) 21.04.2011, 18:05

Да, event пропустил.
А кроссбраузерную цеплялку событий это уже каждый сам себе.

poorking · #9 (**permalink**) 13.05.2011, 20:16

Здравствуйте, извините что старую тему поднимаю, но лучше чем новую создавать.
У меня есть canvas, на котором отрисовывается изображение, вид которого зависит от положения кусора, пробем нет, повесил обработчик на mousemove, но при загрузке страницы получается что canvas пустой если не шевелить мышкой.
Добавил так примерно потом

document.addEventListener("mouseover", function(e){
     draw(e);
     this.removeEventListener("mouseover", arguments.callee, false);
}, false);

Но mouseover только в FF и IE9 (младше не смотрел даже еще) происходит при загрузке если курсор в окне браузера, попробовал на window load повесить, но у этого события нет pageX и pageY, как еще узнать координаты курсора прямо при загрузке?

UPD
пока что вот так схитрил
просто вызываю при загрузке, и будто указатель мыши в центре (мне только X нужно), какой никакой выход
draw({pageX: Math.round(window.innerWidth/2)});

dmitriymar · #10 (**permalink**) 13.05.2011, 22:52

poorking,
канву в контейнер по размерам канвы и обработчик на контейнер

Форум

Справочник

Discord чат

Курсы javascript