Учу js, не могу разобраться с координатами

[Zzz_]

field.onclick = function(e) {

var fieldCoords = field.getBoundingClientRect();
var fieldInnerCoords = {
top: fieldCoords.top + field.clientTop,
left: fieldCoords.left + field.clientLeft
};

ball.style.left = e.clientX - fieldInnerCoords.left + 'px';
ball.style.top = e.clientY - fieldInnerCoords.top + 'px';

};

Что это за "e" аргумент!?!??!

без него функция не работает

Edited January 10, 2013 by Zzz_

[cyklop77]

это объект события. у него много свойств, которые тебя очень заинтересуют, судя по вопросу

[Zzz_]

что за e!?

Или где об этом можно прочитать%?

Я сейчас как раз разбираю объекты события,

но не могу понять это код, для чего параметр e!? что это?

[cyklop77]

это объект события

[wwt]

field.onclick = function(event) {

var fieldCoords = field.getBoundingClientRect();

var fieldInnerCoords = {

top: fieldCoords.top + field.clientTop,

left: fieldCoords.left + field.clientLeft

};

ball.style.left = event.clientX - fieldInnerCoords.left + 'px';

ball.style.top = event.clientY - fieldInnerCoords.top + 'px';

};

При срабатывании события его обработчику передается обьект события,подробнее:

http://javascript.ru/tutorial/events

http://javascript.ru...ents/properties

Edited January 10, 2013 by wwt

[Hoax]

Это скорее параметр, а не аргумент. Об нем написано ранее в учебникие, почитай там *Делегирование событий*

field.onclick = function(e) { // при клике на field - вызывается функция, т.е. происходит событие. "E" это event - событие.

var fieldCoords = field.getBoundingClientRect(); // getBoundingClientRect() - получить координаты field. И скопировать в var

var fieldInnerCoords = { // создать объект fieldInnerCoords, со свойствами top, left.

top: fieldCoords.top + field.clientTop, // свойство top содержит fieldCoords.top - координаты верхнего левого угла.

left: fieldCoords.left + field.clientLeft // left - аналогично. clientTop/Left - это ширина бордена с верху и слева.

};

ball.style.left = e.clientX - fieldInnerCoords.left + 'px'; // сдвинуть ball на расстояние = координаты курсора (горизонтальные) - координаты отступа field

ball.style.top = e.clientY - fieldInnerCoords.top + 'px';
};

Только я не совсем понимаю DOM этого всего.

Скинь полный код, или ссылку на html

Edited January 10, 2013 by Hoax

[Zzz_]

Это скорее параметр, а не аргумент. Об нем написано ранее в учебникие, почитай там *Делегирование событий*

field.onclick = function(e) { // при клике на field - вызывается функция, т.е. происходит событие. "E" это event - событие.

var fieldCoords = field.getBoundingClientRect(); // getBoundingClientRect() - получить координаты field. И скопировать в var

var fieldInnerCoords = { // создать объект fieldInnerCoords, со свойствами top, left.

top: fieldCoords.top + field.clientTop, // свойство top содержит fieldCoords.top - координаты верхнего левого угла.

left: fieldCoords.left + field.clientLeft // left - аналогично. clientTop/Left - это ширина бордена с верху и слева.

};

ball.style.left = e.clientX - fieldInnerCoords.left + 'px'; // сдвинуть ball на расстояние = координаты курсора (горизонтальные) - координаты отступа field

ball.style.top = e.clientY - fieldInnerCoords.top + 'px';
};

Только я не совсем понимаю DOM этого всего.

Скинь полный код, или ссылку на html

http://learn.javascr...ve-1/index.html

У немного разобрался, меня запутал параметр функции, как я потом прочитал он добавляется автоматически, современными браузерами.

Спасибо за ответы !

Edited January 11, 2013 by Zzz_

[Hoax]

При нажатии на field получаем =

Координаты мыши (200px) - Отступ field слева (fieldCoords.left = 100px), включая border (+ field.clientLeft = 10px), получаем = сдвинуть мяч на 90px относительно родителя, т.к. position:absolute.

Сорри за скрин, чето он не ровные получился

А что за урок? Я что-то такого задания не припомню...

[Zzz_]

хе, теперь вроде все понял, он то относительно родителя позиционируется, спасибо.

http://learn.javascript.ru/obtaining-event-object

[Hoax]

Отличная статья, как я раньше ее не видел