События мыши: последовательность наступления

Update: Более новый материал по этой теме находится по адресу https://learn.javascript.ru/mouse-clicks.

  1. Виды кликов-событий
  2. Возможность отключения реакции браузера
  3. Последовательность генерации
    1. Левый одиночный клик
    2. Правый одиночный клик
    3. Средний клик
    4. Двойной клик
      1. Двойной левый клик
      2. Двойной правый клик
      3. Двойной средний клик
  4. mouseover, mouseout и mousemove
    1. Порядок и частота
    2. Текстовые элементы

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

К разным кнопкам браузеры привязывают свои собственные «действия по-умолчанию», например — Firefox при клике на среднюю кнопку мыши открывает новую вкладку.
В зависимости от браузера, для каких-то кнопок действия по-умолчанию можно отменять, а для каких-то — нельзя.

Самое известное событие — onclick. Более полный список:

mousedown
Нажатие на кнопку мыши
mouseup
Нажатая кнопка мыши отпущена
click
Клик мыши
dblclick
Двойной клик
contextmenu
Правый клик

События mousedown и mouseup в основном используются, когда идет нажатие на кнопку, перемещение, а потом мышь отпускается. Например, при выделении текста, или переносе объекта.

А события click и dblclick в основном нужны для работы с простыми кликами. Клик происходит при последовательных mousedown->mouseup на одном и том же объекте. Если Вы передвините мышь куда-то между mousedown и mouseup, то событие click не произойдет.

Событие contextmenu возникает при правом клике мышью, и по умолчанию вызывает контекстное меню. Не на всех браузер показ меню можно отключить.

Когда Вы кликаете на чем-то в браузере, он генерирует мышиные события. Обычно они завязаны на внутренние механизмы браузера, например — переход по ссылке или вызов контекстного меню.

Но javascript позволяет своим обработчикам событий останавливать обработку событий, так чтобы исключить «родную» реакцию браузера.

Все браузеры позволяют отключать реакцию по умолчанию на левую кнопку мыши.

Фрагмент кода кроссбраузерного обработчика выглядит следующим образом:

...
if (event.preventDefault)
	event.preventDefault()
else
	event.returnValue= false
return false

Однако, для правой и средней кнопки — действия по умолчанию могут быть отключены не везде. В некоторых браузерах разрешить javascript’у отключать родные действия могут специальные настройки в конфигурации.

В Firefox специальной настройкой можно позволить javascript убирать родную реакцию для средней кнопки мыши, а Opera — для правой.

Эти настройки влияют на все страницы, и их нельзя поменять из javascript. Редкие посетители их ставят, так что можно сказать — правая и средняя кнопка не юзабельны для ряда браузеров.

Вот сводная таблица по возможности отключения родной реакции браузера:

 Левая кнопкаСредняя кнопкаПравая кнопка
Internet ExplorerДаДаДа
FirefoxДаПравить конфигДа
Safari WinДаДаДа
OperaДаНетНет
KonquerorДаДаДа

Во всех браузерах при клике мышью генерируются события:

 Все браузеры
ВНИЗ
  • mousedown
ВВЕРХ
  • mouseup
  • click

Правую кнопку мыши можно использовать в IE, Firefox и Konqueror. Для остальных браузеров обычно
применяют оригинальное решение: вместо правого клика предлагается shift+click.

 Internet ExplorerFirefox WinFirefox LinOpera 9 и KonquerorSafari Win
ВНИЗ
  • mousedown
  • mousedown
  • mousedown
  • contextmenu
  • mousedown
  • mousedown
ВВЕРХ
  • mouseup
  • contextmenu
  • mouseup
  • contextmenu
  • mouseup
  • mouseup
  • mouseup
  • click

Заметим, что событие click для правой кнопки мыши генерируется только в Safari, который обрабатывает правую кнопку точно так же, как левую.

Кроме того, событие contextmenu есть только в Firefox и Internet Explorer, причем время генерации зависит от операционной системы. Это связано с реальным поведением контекстного меню. В Firefox/Internet Explorer под Windows оно появляется только когда отпустишь кнопку, а в Firefox под Linux — сразу.

Средняя кнопка мыши сейчас есть почти у всех, даже мышам с 2 кнопками дают возможность делать средний клик — нажав 2 кнопки одновременно, или кликнув на колесико.

Однако, в Firefox и Opera к среднему клику привязаны свои действия по умолчанию, которые нельзя отключить через javascript.

Поэтому реально средний клик юзабелен лишь в Internet Explorer и Konqueror.

 Internet Explorer и Safari WinOpera 9, Konqueror, Firefox
ВНИЗ
  • mousedown
  • mousedown
ВВЕРХ
  • mouseup
  • click
  • mouseup

Обработка двойных кликов важна, даже если Вы не собираетесь их использовать. Например, Internet Explorer генерирует при двойном клике — одно событие click, а Firefox — два.

Вот полная картина происходящего:

 Internet ExplorerFirefox, Opera и Safari WinKonqueror
ВНИЗ
  • mousedown
  • mousedown
  • mousedown
ВВЕРХ
  • mouseup
  • click
  • mouseup
  • click
  • mouseup
  • click
ВНИЗ
  • —
  • mousedown
  • mousedown
ВВЕРХ
  • mouseup
  • dblclick
  • mouseup
  • click
  • dblclick
  • mouseup
  • dblclick

Заметим, что Internet Explorer не генерирует mousedown на втором нажатии.

Двойной правый и двойной средний клик почти не используюся в современных интерфейсах, но рассмотрим и их тоже — оригинальные решения в Web часто бывают к месту

 Internet Explorer, Firefox WinFirefox Lin, OperaSafari WinKonqueror
ВНИЗ
  • mousedown
  • mousedown
  • contextmenu
  • mousedown
  • mousedown
ВВЕРХ
  • mouseup
  • contextmenu
  • mouseup
  • mouseup
  • click
  • mouseup
ВНИЗ
  • mousedown
  • mousedown
  • contextmenu
  • mousedown
  • mousedown
ВВЕРХ
  • mouseup
  • contextmenu
  • mouseup
  • mouseup
  • click
  • dblclick
  • mouseup

К счастью, здесь Internet Explorer не пропускает второе событие mousedown.

Все браузеры, кроме Safari (тестировалось под Windows) считают два правых клика — двумя кликами по очереди, а не dblclick.

И, наконец, двойной клик средней кнопкой, которая юзабельна только в Internet Explorer, Konqueror и Safari Win.

Как и в случае с правой кнопкой, этот клик обычно считается за два обычных.

 Internet ExplorerSafari WinFirefox, Opera, Konqueror
ВНИЗ
  • mousedown
  • mousedown
  • mousedown
ВВЕРХ
  • mouseup
  • click
  • mouseup
  • click
  • mouseup
ВНИЗ
  • mousedown
  • mousedown
  • mousedown
ВВЕРХ
  • mouseup
  • click
  • mouseup
  • click
  • dblclick
  • mouseup

События mouseover и mouseout срабатывают каждый раз, когда мышь заходит на элемент или выходит с него.

Событие mousemove срабатывает при каждом передвижении мыши. Если Вы пишите код для обработки mousemove — постарайтесь сделать его достаточно быстрым, иначе при передвижении курсора будут заметны тормоза.

При переходе с внешнего элемента на внутренний, фиксируется событие onmouseout для внешнего и onmouseover для внутреннего. Смысл в том, что мышь находится ровно «в одном элементе» одновременно: в ближайшем(по z-index) и самом глубоком.

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

Можно зайти во внутренний элемент, не проходя через внешний.

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

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

Тестовый скрипт.

Текстовые элементы

Было замечено, что Safari странно обрабатывает mouseover/mouseout при проходе над текстовыми элементами, регистрирует для них события и т.п.

В этом случае можно фильтровать лишние события, проверяя реальное положение мыши.

Тестовый скрипт.

Список событий в JavaScript

Бывают различные виды событий. К примеру, события: форм, полей, мыши, клавиатуры, страницы. Далее в таблице собраны названия событий и их описание.

События мыши

Атрибут Описание
click Клик мыши на элементе (событие срабатывает после того, как кнопка мыши отпущена).
dblclick Сделан двойной щелчок.
mousedown Кнопка мыши нажата.
mouseup Кнопка мыши отжата.
mouseover Указатель мыши находится над элементом.
mousemove Указатель мыши движется над элементом.
mouseout Указатель мыши двигался над элементом, но ушёл с него.

События клавиатуры

Атрибут Описание
keydown Зажата кнопка на клавиатуре.
keypress Тоже что и «keydown», но и кнопка зажимается настолько долго, что происходит повторный набор символа.
keyup Была отпущена нажатая кнопка.

События полей, форм и страницы

Атрибут Описание
submit Форма начала отправляться (нажата кнопка «submit»), но переадресация на страницу в атрибуте «action» ещё не началась.
change Содержимое элемента изменилось (срабатывает в том числе, если изменились значение атрибутов).
select Текст или дочерние элементы выделены.
focus Элемент получил фокус. К примеру, клик по текстовому полю даёт на него фокус и можно набирать текст
blur Элемент потерял фокус.
load Завершена загрузка страницы в браузере.
unload Страница в браузере закрывается или происходит переход на другую страницу по ссылке.
scroll Происходит прокрутка страницы или элемента.

Cмотрите другие статьи:

Работа с атрибутами элементов в JavaScript

Список атрибутов для событий в JavaScript

Была ли эта статья полезна? Есть вопрос?

Закажите недорогой хостинг Заказать

всего от 290 руб

MouseEvent() — веб-API | MDN

Конструктор MouseEvent() создает новый объект MouseEvent .

 новый MouseEvent(тип)
новый MouseEvent (тип, параметры)

Параметры

тип

Строка с названием события. Он чувствителен к регистру, и браузеры устанавливают его на dblclick , mousedown , mouseenter , mouseleave , mousemove , mouseout , mouseover или mouseup .

Опции Дополнительно

Объект, который в дополнение к свойствам, определенным в UIEvent() , может иметь следующие свойства:

screenX Дополнительно

Число, по умолчанию 0 , то есть горизонтальное положение события мыши на экране пользователя; установка этого значения не перемещает указатель мыши.

Экран Y Дополнительно

Число, по умолчанию 0 , то есть вертикальное положение события мыши на экране пользователя; установка этого значения не перемещает указатель мыши.

clientX Дополнительно

Число, по умолчанию 0 , то есть горизонтальное положение события мыши в клиентском окне на экране пользователя; установка этого значения не перемещает указатель мыши.

клиентY Дополнительно

Число, по умолчанию 0 , то есть вертикальное положение события мыши в клиентском окне на экране пользователя; установка этого значения не перемещает указатель мыши.

клавиша Ctrl Дополнительно

Логическое значение, указывающее, была ли одновременно нажата клавиша ctrl . По умолчанию ложь .

shiftKey Дополнительно

Логическое значение, указывающее, была ли одновременно нажата клавиша shift . По умолчанию false .

altKey Дополнительно

Логическое значение, указывающее, была ли одновременно нажата клавиша alt . По умолчанию false .

метаКлюч Дополнительно

Логическое значение, указывающее, была ли одновременно нажата клавиша meta . По умолчанию false .

Кнопка Дополнительно

Число, по умолчанию 0 , которое описывает, какая кнопка нажата во время событий, связанных с нажатием или отпусканием кнопки:

Значение Значение
0 Нажата основная кнопка (обычно левая кнопка) или не инициализирована
1 Нажата вспомогательная кнопка (обычно средняя кнопка)
2 Нажата дополнительная кнопка (обычно правая кнопка)
кнопки Дополнительно

Число, по умолчанию 0 , описывающее, какие кнопки нажимаются при запуске события:

Значение битового поля Значение
0 Кнопка не нажата
1 Нажата главная кнопка (обычно левая кнопка)
2 Нажата дополнительная кнопка (обычно правая кнопка)
4 Нажата вспомогательная кнопка (обычно средняя кнопка)

EventTarget , по умолчанию null , который является только что оставленным элементом (в случае mouseвведите или mouseover ) или входит (в случае mouseout или mouseleave ).

регион Нестандартный Дополнительно

Строка, по умолчанию равная null , которая является идентификатором области попадания, на которую повлияло событие. Отсутствие какой-либо затронутой области попадания представлено значением null .

В некоторых реализациях передача чего-либо, кроме числа для экрана и клиентские поля будут выдавать Ошибка типа .

загрузка таблиц в браузере с включенным CD B. Включите JavaScript для просмотра данных.

  • MouseEvent , интерфейс создаваемых им объектов.

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Просмотрите исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Эта страница была последний раз изменена участниками MDN.

События мыши

❮ События ДОМ ❮ Объекты событий

Объект MouseEvent

Объект MouseEvent обрабатывает события, возникающие при взаимодействии мыши с HTML-документом.

События мыши

Спецификация
События пользовательского интерфейса
# dom-mouseevent-mouseevent
Событие Происходит, когда
по клику Пользователь щелкает элемент
в контекстном меню Пользователь щелкает элемент правой кнопкой мыши
ondblclick Пользователь дважды щелкает элемент
Кнопка мыши нажата над элементом
ввод с помощью мыши Указатель мыши перемещается в элемент
на мышелист Указатель мыши выходит за пределы элемента
перемещение мыши Указатель мыши перемещается по элементу
onmouseout Указатель мыши выходит за пределы элемента
при наведении мыши Указатель мыши перемещается на элемент
для мыши Кнопка мыши отпущена над элементом

Свойства события MouseEvent

Свойство Возвращает
AltKey Если нажата клавиша ALT
кнопка Какая кнопка мыши нажата
кнопки Какие кнопки мыши были нажаты
клиентX Координата X указателя мыши (относительно окна)
клиентY Координата Y указателя мыши (относительно окна)
CtrlKey Если нажата клавиша CTRL
деталь Подробности о событии
МетаКей Если нажата клавиша META
смещениеX Координата X указателя мыши (относительная цель)
смещение YКоордината Y указателя мыши (относительная цель) 90 162
страницаX Координата X указателя мыши (относительно документа)
страница Y Координата Y указателя мыши (относительно документа)
родственная цель Элемент, вызвавший событие мыши
экранX Координата X указателя мыши (относительно экрана)
Экран Y Координата Y указателя мыши (относительно экрана)
ShiftKey Если нажата клавиша SHIFT
который Устарело (избегайте его использования)
Вместо этого используйте свойство кнопки

Унаследованные свойства и методы

MouseEvent наследует все свойства и методы от:

UiEvent

Объект события

❮ События ДОМ ❮ Объекты событий


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery Tops

9002 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

No related posts.