Скажите я правильно понял что происходит в функции? [закрыт]

#javascript

        
             
                
                    
                        
                            Закрыт. Данный вопрос необходимо конкретизировать. Ответы
на него в данный момент не принимаются.
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            Хотите улучшить этот вопрос? Переформулируйте вопрос,
чтобы он был сосредоточен только на одной проблеме, отредактировав его.
                        
                        Закрыт 10 месяцев назад.
                                                                                
           
                
        


var field = document.querySelector('#field');
var ball  = document.querySelector('#ball');

field.onclick = function(e){

  var fieldCoords = this.getBoundingClientRect();

  var  fieldInnerCoords = {
    left: fieldCoords.left + field.clientLeft,
    top:  fieldCoords.top + field.clientTop
  }

  ball.style.left = e.clientX -  fieldInnerCoords.left + 'px';
  ball.style.top = e.clientY -  fieldInnerCoords.top + 'px';
}
 #field {
      width: 150px;
      border: 10px groove black;
      background-color: #00FF00;
      position: relative;
      margin: 300px auto;
    }

    #ball {
      position: absolute;
    }

   . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  . . . . . . . . . . . . . . . . . . . . . . . 






field.onclick происходит событие click первым аргументом всегда будет объект Event
который содержит детали события
У объекта Event есть  свойства clientX и clientY  которые означают координаты курсора
в момент клика (относительно окна)
В переменную fieldCoords присваиваем объект который содержит координаты элемента field;
Мы хотим чтобы мяч перемещался по полю, но не убегал за поле 
Для этого из переменной fieldCoords надо получить свойства которые содержат в переменной
это можно сделать так fieldCoords.left и fieldCoords.top которые запишем соответственно
в left и top
Затем в left и top прибавим рамки для этого есть свойства clientLeft и clientTop
получается field.clientLeft 
Мяч у нас находится в переменной ball который позиционирован абсолютно то будет в
левом верхнем углу переменной field 
Получаем css cсвойство left  и присваиваем координаты курсора в момент клика (относительно
окна) clientX от которого вычитаем переменную  fieldInnerCoords  которые содержит координаты
элемента относительно окна которому прибавили рамку left: fieldCoords.left + field.clientLeft
и так как left  это css свойство ему надо указать единицу измерения желательно в px
так как  координаты элемента в пикселях 


Правильно я понял что происходит в этой функции ?
    

Ответы

Ответ 1

Да. Очень хорошее и детальное описание происходящего.


Ответ 2

Ошибка в пункте 4.

Левый верхний угол картинки с мячом просто переносится в место клика мыши.

Какой-то сумбур в пункте 8. 

Этот пункт можно описать проще: перевод из координат относительно страницы в координаты
относительно клиентской части поля.


Ответ 3

Не знаю, чего мы хотим, но пункт 4 не совсем соответствует действительности:

 

А так, описание вроде верное.