Как определить, находится ли курсор на элементе (над элементом)?

Пример как определить находится ли указанный элемент под курсором. Нужно учесть что указанный элемент может иметь вложенные элементы над которым также может находится курсор.

Самый простой и надежный способ тут, мне кажется взять позицию указанного элемента, и посмотреть (посчитать) находится ли курсов в области этого элемента. По-моему, с таким подходом будет меньше всего операций, чтобы не проверять каждый вложенный элемент.

Рабочий код у меня получился такой:

function is_cursor_on_elem( ev, elem ){

	let mouseX = ev.clientX
	let mouseY = ev.clientY
	let rect = elem.getBoundingClientRect()

	return (
		mouseX > rect.x && mouseX < rect.bottom
		&&
		mouseY > rect.y && mouseY < rect.right
	)
}

Пример использования.

Допустим у нас есть элемент #pre, нам на событии mouseleave другого элемента нужно определить находится ли сейчас курсор над элементом #pre.

const some_elem = document.querySelector( '#some-element' )
const pre = document.querySelector( '#pre' )

some_elem.addEventListener( 'mouseleave', ev => {

	if( is_cursor_on_elem( ev, pre ) ){
		// курсор над #pre
	}
	else {
		// курсор над другим элементом - не #pre
	}

} )

Заметки по теме

Координаты курсора
  • pageX/Y - координаты относительно элемента <html> в пикселях CSS.
  • clientX/Y - координаты относительно viewport в пикселях CSS.
  • screenX/Y - координаты относительно screen в пикселях устройства.
Поддержка .getBoundingClientRect()
Метод document.elementFromPoint()

Позволяет получить первый элемент над которым находится курсор.

Подробнее: document.elementFromPoint()