В качестве практики решил сделать абсолютно простую вещь: область, внутри которой появляется плашка, показывающая текущие координаты курсора, и за курсором следящая. Вот область:
<div id="elem" style="width: 400px; height: 400px; margin: 0 auto; background-color: red; position: relative;"><span></span></div>
Все ок, вот джаваскрипт, привязка функции к движению мыши:
var elem = document.getElementById('elem');
elem.addEventListener('mousemove', create);
Далее, сама функция create:
function create(event) {
var x = event.clientX; //получение координат мыши по x
var y = event.clientY; //по y
let parent = document.querySelector('#elem'); //получение объекта-родителя
let removed = document.getElementsByTagName('span'); //получение того, кого удаляем. Я не придумал как можно сделать так, чтобы сначала span появлялся, а потом удалялся, поэтому первым следует удаление
parent.removeChild(removed[0]); //собственно, удаление
let p = document.createElement('span'); //создание нового span
p.style.backgroundColor = 'yellow'; //украшение
p.style.position = 'absolute'; //позиционирование относительно курсора сделал через абсолютные и относительные координаты
p.style.top = y-20 + 'px'; //задаем эти координаты
p.style.left = x-580 + 'px'; //и снова
p.innerHTML = x + "," + y; // пихаем внутрь координаты курсора
parent.appendChild(p); //рожаем этот span
}
В общем, все вроде работает, но видно плавное отставание span от курсора при быстром дергании курсора. Есть способы сделать это прям в две строчки с помощью каких то свойств высшего порядка?