Обработка событий pointerenover, pointerout, pointerenter, pointerleave

Многие события в JavaScript были добавлены тогда, когда не было еще тач-устройств и таких вещей, как стилусы. Поэтому спустя время необходимость в обработке событий для различных указателей (мышь, палец, стилус) стала очень нужна. Для решения этих задач был внедрён стандарт Pointer Events («События Указателя»). Он предоставляет единый набор событий для всех типов указывающих устройств.

Здесь мы рассмотрим события pointerenover, pointerout, pointerenter, pointerleave.

Событие pointerenter

Событие pointerenter возникает, когда указатель (мышь, палец, стилус) попадает в пределы элемента. Событие не всплывает (аналогично mouseenter у мыши).

Событие pointerover

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

В отличие от  pointerenter  это событие срабатывает на потомках (при входе в любой вложенный элемент) и всплывает.

Использовать pointerover стоит:

• Когда нужно реагировать на наведение на весь блок, включая вложенные элементы
• Если нужно использовать делегирование событий
• Когда нужно обрабатывать движение указателя через родителя и потомков

Событие pointerout

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

Пример с использованием обработки событий pointerover / pointerout при наведении на элементы списка.

See the Pen Untitled by HTML-plus (@ambassador) on CodePen.

Событие pointerleave

Событие pointerleave возникает, когда указатель (мышь, палец, стилус) покидает пределы элемента, даже если указатель продолжает двигаться. Событие pointerleave не всплывает (не участвует в event bubbling).

See the Pen Викторина с помощью pointerevents by HTML-plus (@ambassador) on CodePen.

Отличие от похожих событий

Поведение:

• Когда указатель входит в элемент → pointerenter
• Когда указатель уходит полностью за его пределы → pointerleave
• Если элемент содержит дочерние узлы (например, текст, <span>), pointerleave не сработает, пока указатель остаётся внутри общего родителя.

Когда полезно использовать pointerleave

• Для сброса состояний (например, убрать выделение кнопки, если пользователь увёл палец/курсор до отпускания).
• При реализации drag & drop — чтобы определить, что указатель ушёл из зоны drop.
• В UI: скрыть тултип, подсказку, всплывающее меню и т.п.
• При рисовании/жестах: остановить действие, если пользователь покинул область.

Пример с всплывающими подсказками на основе обработки событий pointerenter и pointerleave, а также pointermove. Реализация включает следующее:

• В тексте несколько слов с классом .tooltip-target и атрибутом data-tooltip — это подсказки.
• При наведении (pointerenter) подсказка показывается и позиционируется рядом с курсором.
• При движении указателя (pointermove) подсказка плавно следует за курсором.
• При уходе с слова (pointerleave) подсказка скрывается.
• Позиционирование учитывает границы окна, чтобы подсказка не выходила за экран.

See the Pen Подсказки с помощью by HTML-plus (@ambassador) on CodePen.

Еще один вариант добавления подсказок с изображениями. Здесь:

• При наведении мышью/стилусом — подсказка появляется, позиционируется и двигается по элементу.
• При касании (touch) — первый тап открывает подсказку, второй — закрывает.
• Если тапнуть в другое место — подсказка скрывается.

See the Pen Подсказки с помощью pointerenter/pointerleave by HTML-plus (@ambassador) on CodePen.

Еще один пример касается выпадающего меню.

See the Pen Меню с pointerenter/pointerleave by HTML-plus (@ambassador) on CodePen.

Сравнение  событий