Типы событий пользовательского интерфейса MouseEvent

Типы событий мыши MouseEvent перечислены ниже:

• auxclick
• click
• dblclick
• mousedown
• mouseenter
• mouseleave
• mousemove
• mouseout
• mouseover
• mouseup

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

 

Тип события мыши — auxclick

Тип события auxclick ДОЛЖЕН быть отправлен на самую верхнюю цель события, обозначенную указателем, когда пользователь нажимает и отпускает кнопку неосновного указателя, или иным образом активирует указатель таким образом, который имитирует такое действие. Способ приведения в действие кнопки мыши зависит от устройства указателя и конфигурации среды, например, он МОЖЕТ зависеть от местоположения экрана или задержки между нажатием и отпусканием кнопки указательного устройства.

Событие auxclick должно запускаться только для неосновных кнопок указателя (т. е. когда значение кнопки button не равно «0«, значение buttons больше «1«). Основная кнопка (как и левая кнопка стандартной мыши) НЕ ДОЛЖНА запускать события auxclick. Смотрите click для соответствующего события, связанного с основной кнопкой.

Событию auxclick МОЖЕТ предшествовать события mousedown и mouseup на одном и том же элементе, независимо от изменений между другими типами узлов (например, текстовыми узлами). В зависимости от конфигурации среды, событие auxclick МОЖЕТ быть отправлено, если между нажатием и отпусканием кнопки указательного устройства происходит одно или несколько событий типа mouseover, mousemove и mouseout.

 

Действие по умолчанию для типа события auxclick варьируется в зависимости от цели события и значения атрибутов button или  buttons. Типичные действия по умолчанию для типа события auxclick следующие:

• Если цель события имеет ассоциированное поведение активации, действие по умолчанию ДОЛЖНО состоять в том, чтобы выполнить это поведение активации (см. §3.5 Триггеры активации и поведение).

Пример № 8

Получение и обработка auxclick для средней кнопки.

myLink.addEventListener("auxclick", function(e) { if (e.button === 1) { // Это предотвратит поведение по умолчанию, например, открытие новой вкладки при среднем нажатии на ссылку.

e.preventDefault(); // Сделайте что-нибудь еще, чтобы обработать щелчок средней кнопкой, например, позаботиться об открытии ссылок или кнопок без ссылок в новых вкладках таким образом, чтобы это соответствовало приложению. Другие действия, такие как закрытие вкладки в полосе вкладок, которая должна выполняться при нажатии, также могут быть выполнены здесь. } });

В случае правой кнопки событие auxclick отправляется после любого события contextmenu. Обратите внимание, что некоторые пользовательские агенты проглатывают все входные события во время отображения контекстного меню, поэтому auxclick может быть недоступен для приложений в таких сценариях. Посмотрите этот пример для получения дополнительной информации.

Пример № 9

Получение и обработка auxlick для правой кнопки

myDiv.addEventListener("contextmenu", function(e) { // Этот вызов гарантирует, что никакое контекстное меню не показывается, чтобы помешать странице, получающей события.

e.preventDefault(); });

myDiv.addEventListener("auxclick", function(e) { if (e.button === 2) { // Сделайте что-нибудь еще, чтобы обработать щелчок правой кнопкой, например, открыть настроенное контекстное меню внутри приложения. } });

 

Тип события мыши — click

Тип события click ДОЛЖЕН быть отправлен на верхнюю цель события, обозначенную указателем, когда пользователь нажимает и отпускает кнопку первичного указателя, или иным образом активирует указатель таким образом, который имитирует такое действие. Способ приведения в действие кнопки мыши зависит от устройства указателя и конфигурации среды, например, он МОЖЕТ зависеть от местоположения экрана или задержки между нажатием и отпусканием кнопки указательного устройства.

Событие click должно запускаться только для основной кнопки указателя (т. е. когда значение button равно 0, значение buttons равно 1). Вторичные кнопки (например, средняя или правая кнопка стандартной мыши) НЕ ДОЛЖНЫ вызывать события щелчка click. Смотрите auxclick для соответствующего события, связанного с неосновными кнопками.

Событию click МОЖЕТ предшествовать события mousedown и mouseup для одного и того же элемента, независимо от изменений между другими типами узлов (например, текстовыми узлами). В зависимости от конфигурации среды, событие click МОЖЕТ быть отправлено, если между нажатием и отпусканием кнопки указательного устройства происходит одно или несколько событий типа mouseover, mousemove и mouseout. Событие click МОЖЕТ также сопровождаться событием dblclick.

Пример № 10

Если пользователь вводит дочерний элемент текстового узла в элемент <p>, стилизованный с большой высотой строки, он слегка перемещает мышь, так что она больше не находится над областью, содержащей текст, но все еще находится внутри содержащего блока этот элемент <p> (т. е. указатель находится между строками одного и того же текстового блока, но не над текстовым узлом как таковым), а затем в последствии движения мыши вверх, это, скорее всего, будет вызывать событие click (если оно попадает в нормальный временной гистерезис за click), так как пользователь остался в рамках того же элемента. Обратите внимание, что генерируемые агентом пользователя события мыши не отправляются на текстовые узлы.

---

В дополнение к тому, что он связан с указательными устройствами, тип события click ДОЛЖЕН быть отправлен как часть активации элемента, как описано в §3.5 Триггеры активации и поведение.

Для максимальной доступности авторам контента рекомендуется использовать тип события click при определении поведения активации для пользовательских элементов управления, а не другие типы событий указывающего устройства, такие как mousedown или mouseup, которые в большей степени зависят от устройства. Хотя тип события click имеет свое происхождение в устройствах указателя (например, мыши), последующие усовершенствования реализации расширили его за пределы этой ассоциации, и его можно рассматривать как независимый от устройства тип события для активации элемента.

Действие по умолчанию для типа события click зависит от цели события и значения атрибутов button или buttons. Типичные действия по умолчанию для типа события click  следующие:

• Если цель события имеет ассоциированное поведение активации, действие по умолчанию ДОЛЖНО состоять в том, чтобы выполнить это поведение активации (см. §3.5 Триггеры активации и поведение).
• Если цель события является фокусируемой, действие по умолчанию ДОЛЖНО состоять в том, чтобы придать этому элементу фокус документа.

 

Тип события мыши — dblclick

Пользовательский агент ДОЛЖЕН отправлять это событие, когда основная кнопка указательного устройства нажимается дважды над элементом. Определение двойного щелчка зависит от конфигурации среды, за исключением того, что цель события ДОЛЖНА быть одинаковой для mousedown, mouseup и dblclick. Этот тип события ДОЛЖЕН быть отправлен после типа события click, если щелчок и двойной щелчок происходят одновременно, и после события типа mouseup в противном случае.

Как и в случае события click, событие dblclick должно запускаться только для основной кнопки указателя. Вторичные кнопки НЕ ДОЛЖНЫ запускать события dblclick.

Отмена события click не влияет на запуск события dblclick.

Как и в случае с типом события click, действие по умолчанию для типа события dblclick варьируется в зависимости от цели события и значения атрибутов button или buttons. Обычно типичные действия по умолчанию для типа события dblclick совпадают с действиями для типа события click со следующим дополнительным поведением:

• Если цель события выбирается, действием по умолчанию ДОЛЖНО быть выбор части или всего выбираемого контента. Последующие клики МОГУТ выбрать дополнительные выбираемые части этого контента.

 

Тип события мыши — mousedown

Агент пользователя должен отправить это событие, когда кнопка указывающего устройства нажата над элементом.

Многие реализации используют событие mousedown, чтобы начать множество контекстно-зависимых действий по умолчанию. Эти действия по умолчанию могут быть предотвращены, если это событие отменено. Некоторые из этих действий по умолчанию могут включать: начало взаимодействия перетаскивания с изображением или ссылкой, запуск выделения текста и т. д.. Кроме того, некоторые реализации предоставляют функцию панорамирования с помощью мыши, которая активируется при нажатии средней кнопки мыши во время событие mousedown отправлено.

Тип события мыши — mouseenter

Пользовательский агент ДОЛЖЕН отправлять это событие, когда указывающее устройство перемещается на границы элемента или одного из его потомков. Пользовательский агент ДОЛЖЕН также отправлять это событие, когда элемент или один из его потомков перемещается под основное указательное устройство. Этот тип события аналогичен наведению мыши mouseover, но отличается тем, что он не всплывает, и НЕ ДОЛЖЕН отправляться, когда устройство-указатель перемещается от элемента к границам одного из его дочерних элементов.

Есть сходство между этим типом события и псевдоклассом CSS: hover [CSS2]. Смотрите также тип события mouseleave.

Тип события мыши — mouseleave

Пользовательский агент ДОЛЖЕН отправлять это событие, когда указывающее устройство перемещается за пределы элемента и всех его потомков. Пользовательский агент ДОЛЖЕН также отправить это событие, когда элемент или один из его потомков переместятся, чтобы больше не находиться под основным указательным устройством. Этот тип события похож на указатель мыши mouseout, но отличается тем, что он не всплывает, и его НЕ ДОЛЖНО отправлять до тех пор, пока указывающее устройство не покинет границы элемента и границы всех его дочерних элементов.

Есть сходство между этим типом события и псевдоклассом CSS: hover [CSS2]. Смотрите также тип события mouseenter.

Тип события мыши — mousemove

Пользовательский агент ДОЛЖЕН отправлять это событие, когда указывающее устройство перемещается, когда оно находится над элементом. Частота событий при перемещении указательного устройства зависит от реализации, устройства и платформы, но для последовательного перемещения mousemove указателя-устройства СЛЕДУЕТ запускать несколько последовательных событий перемещения мыши mousemove, а не одно событие для каждого случая движения мыши. Реализациям рекомендуется определить оптимальную частоту, чтобы сбалансировать скорость реакции и производительность.

В некоторых средах реализации, таких как браузер, события «перемещения мыши» mousemove могут продолжать возникать, если пользователь начал операцию перетаскивания (например, нажата кнопка мыши) и указательное устройство покинуло границу пользовательского агента.

Ранее это событие указывалось как не подлежащее отмене в событиях DOM Level 2 [DOM-Level-2-Events], но оно было изменено, чтобы отразить существующее взаимодействие между пользовательскими агентами.

Тип события мыши — mouseout

Пользовательский агент ДОЛЖЕН отправлять это событие, когда указывающее устройство перемещается за пределы элемента или когда элемент перемещается так, чтобы больше не находиться под основным указательным устройством. Этот тип события похож на mouseleave, но отличается тем, что он всплывает, и он ДОЛЖЕН отправляться, когда устройство-указатель перемещается от элемента к границам одного из его потомков.

• Смотрите также тип события наведения мыши — mouseover

Тип события мыши — mouseover

Пользовательский агент ДОЛЖЕН отправлять это событие, когда указывающее устройство перемещается на границы элемента или когда элемент перемещается под основное указательное устройство. Этот тип события аналогичен mouseenter, но отличается тем, что он всплывает и должен отправляться, когда устройство указателя перемещается на границы элемента, чей элемент-предок является целью события для того же экземпляра прослушивателя событий.

Смотрите также тип события mouseout.

Тип события мыши — mouseup

Пользовательский агент ДОЛЖЕН послать это событие, когда кнопка указательного устройства отпущена над элементом.

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

В некоторых средах реализации, таких как браузер, событие mouseup может отправляться, даже если указывающее устройство покинуло границу пользовательского агента, например, если пользователь начал операцию перетаскивания с нажатой кнопкой мыши.

Полная версия документа на русском языке

UI Events | События пользовательского интерфейса

Ссылка на первоисточник

https://www.w3.org/TR/uievents/#events-mouse-types