Функции и сокращение кода на JS?

Question

[Робот]

Вот код https://jsfiddle.net/svjzxtn4/2/ с 5 по 10 и с 15 по 20 строчки находится один и тот же кусок кода (дублирование) для того что бы его избежать создаю функцию GetNum и закатываю в неё повторяющийся код https://jsfiddle.net/svjzxtn4/3/ но на событии click срабатывает а при mousemove теперь не работает. Думаю функция не видит координаты. Как правильно в этом случае делать?
Потому что на https://learn.javascript.ru/function-basics в разделе "Внешние переменные" они не передают имя "Вася" в функцию, а она имеет доступ к ней всё равно (глобальная переменная это вроде называется).

Comments

[copal]

А зачем Вам и clientX\Y и pageX\Y одновременно и ещё в if else? Код ниже выполнит else только в том случаи, если Вы курсор в Point(0,0) наведете и только.

if (e.pageX)
		{
      return e.pageX;
    }
    
		else if (e.clientX)
		{
			return e.clientX+(document.documentElement.scrollLeft || 
      document.body.scrollLeft) - document.documentElement.clientLeft;
		}

[Робот]

copal: Нижний блок "Вспомогательные функции" это то что я нагуглил, они не мои просто работает и ладно, до него я тоже хотел добраться что бы понять как там всё устроено.

[copal]

Робот:
https://learn.javascript.ru/mouse-clicks#координат...

Все мышиные события предоставляют текущие координаты курсора в двух видах: относительно окна и относительно документа.

Пара свойств clientX/clientY содержит координаты курсора относительно текущего окна.

При этом, например, если ваше окно размером 500x500, а мышь находится в центре, тогда и clientX и clientY будут равны 250.

Можно как угодно прокручивать страницу, но если не двигать при этом мышь, то координаты курсора clientX/clientY не изменятся, потому что они считаются относительно окна, а не документа.

https://learn.javascript.ru/mouse-clicks#относител...

Координаты курсора относительно документа находятся в свойствах pageX/pageY.

Так как эти координаты — относительно левого-верхнего узла документа, а не окна, то они учитывают прокрутку. Если прокрутить страницу, а мышь не трогать, то координаты курсора pageX/pageY изменятся на величину прокрутки, они привязаны к конкретной точке в документе.

В IE8- этих свойств нет, но можно получить их способом, описанным в конце главы.

То есть весь код в MouseCoords вообще не имеет смыла. Нужно вот так -

block.style.top = e.clientX+'px';
block.style.left = e.clientY+'px';

[copal]

Только хочу заметить что это в контексте кода который Вы показали. Возможно есть что-то ещё и автор этого кода не спроста так сделал.

[Робот]

copal: Благодарю! Про clientX, pageX да читал, попробую переделать код по вашему совету (координаты)

Answer 1

[Иван Кондратьев]

Вы не передаете event-обьект события в новую функцию. Так как он передаётся не явно и в теле функции не присваевается переменной то соответственно в контексте выполнения функции этот объект не сохраняется и GetNum не сможет его найти. Можете почитать о замыкпниях и внутреннем окружении функций.

Comments

[Робот]

Можно мне простым языком для тупых объяснить а не так заумно? Замыкания я пока не понимаю а по запросу "внутреннее окружение функций javascript" вообще ничего не гуглится, ну только те же замыкания на https://learn.javascript.ru/closures

[Иван Кондратьев]

Попробуйте для начала сделать так GetNum(e) во всех трёх местах. Сейчас с телефона пишу так что нет возможности опробывать этод код

[Иван Кондратьев]

Внутреннее окружение - ипеетсятв виду лексическое оно описано по ссылке что вы привели

[Робот]

Иван Кондратьев: Поставил "е" в GetNum(e) сработало, всё как надо, можете пояснить по-простому что за магия с этой "е"? ))

[Иван Кондратьев]

Если по прстому то примерно так:
1. Вы создали обработчик клика. У этого обработчика есть функция( калбек) которая вызывается каждый раз при клике. В неё не явным образом(тоесть сам js передаёт) "объект клика" в вашем случее вы назвали этот объект "e"

[Иван Кондратьев]

В этом объекте находятьчя все данные. Где кликнули,по чем кликнулы,кординыты относительно окна просмотра/браузера/прокрутки и много ещё чего. И вы его просто не передавали в свою функцию.