мышь

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

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

Использованы материалы статьи
Javascript Madness: Mouse Events

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

К разным кнопкам браузеры привязывают свои собственные "действия по-умолчанию", например - 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 Explorer	Firefox Win	Firefox Lin	Opera 9 и Konqueror	Safari 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 Win	Opera 9, Konqueror, Firefox
ВНИЗ	mousedown	mousedown
ВВЕРХ	mouseup click	mouseup

Двойной клик

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

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

Двойной левый клик

	Internet Explorer	Firefox, Opera и Safari Win	Konqueror
ВНИЗ	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 Win	Firefox Lin, Opera	Safari Win	Konqueror
ВНИЗ	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 Explorer	Safari Win	Firefox, Opera, Konqueror
ВНИЗ	mousedown	mousedown	mousedown
ВВЕРХ	mouseup click	mouseup click	mouseup
ВНИЗ	mousedown	mousedown	mousedown
ВВЕРХ	mouseup click	mouseup click dblclick	mouseup

mouseover, mouseout и mousemove

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

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

Порядок и частота

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

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

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

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

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