Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.04.2011, 08:15
Аватар для Magneto
Люмус, Емаксос Developer!
Отправить личное сообщение для Magneto Посмотреть профиль Найти все сообщения от Magneto
 
Регистрация: 06.05.2010
Сообщений: 677

Координаты клика.
Для того чтоб узнать координаты клика на объекте я написал следующий код:
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.

Что ещё попробовать?
Ответить с цитированием
  #2 (permalink)  
Старый 20.04.2011, 08:21
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,476

http://javascript.ru/tutorial/events...entx-y-pagex-y
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 20.04.2011, 08:44
Аватар для Magneto
Люмус, Емаксос Developer!
Отправить личное сообщение для Magneto Посмотреть профиль Найти все сообщения от Magneto
 
Регистрация: 06.05.2010
Сообщений: 677

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

Возможно есть нативные свойства для FireFox о которых я не знаю.
Ответить с цитированием
  #4 (permalink)  
Старый 20.04.2011, 09:15
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Magneto,
где вы там тыканье пальцем в небо увидели?
Ответить с цитированием
  #5 (permalink)  
Старый 20.04.2011, 09:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,055

Magneto,
Вариант координаты элемента вычесть из координат мыши относительно документа Координаты элемента на странице
Ответить с цитированием
  #6 (permalink)  
Старый 21.04.2011, 17:08
Аватар для Magneto
Люмус, Емаксос Developer!
Отправить личное сообщение для Magneto Посмотреть профиль Найти все сообщения от Magneto
 
Регистрация: 06.05.2010
Сообщений: 677

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

<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.

Последний раз редактировалось Magneto, 21.04.2011 в 18:04.
Ответить с цитированием
  #7 (permalink)  
Старый 21.04.2011, 18:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,055

Magneto,
Mozilla Firefox ---> getClickXY(event)
IE ---> el.attachEvent('onclick',getClickXY)
Ответить с цитированием
  #8 (permalink)  
Старый 21.04.2011, 18:05
Аватар для Magneto
Люмус, Емаксос Developer!
Отправить личное сообщение для Magneto Посмотреть профиль Найти все сообщения от Magneto
 
Регистрация: 06.05.2010
Сообщений: 677

Да, event пропустил.
А кроссбраузерную цеплялку событий это уже каждый сам себе.
Ответить с цитированием
  #9 (permalink)  
Старый 13.05.2011, 20:16
Аватар для poorking
prodigy
Отправить личное сообщение для poorking Посмотреть профиль Найти все сообщения от poorking
 
Регистрация: 01.11.2010
Сообщений: 503

Здравствуйте, извините что старую тему поднимаю, но лучше чем новую создавать.
У меня есть 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)});
__________________
readOnly

Последний раз редактировалось poorking, 13.05.2011 в 20:32.
Ответить с цитированием
  #10 (permalink)  
Старый 13.05.2011, 22:52
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить координаты курсора в текстовом поле в пикселях prike Events/DOM/Window 4 23.05.2013 04:35
Получение координат клика мыши uonax Events/DOM/Window 3 20.06.2010 09:32
Координаты картинки после движения Lisenok Общие вопросы Javascript 10 30.10.2009 19:58
Получить координаты мыши alekciy Events/DOM/Window 2 28.12.2008 00:07
Определить координаты объекта в таблице ner2000 Events/DOM/Window 2 14.06.2008 01:56