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

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

К разным кнопкам браузеры привязывают свои собственные "действия по-умолчанию", например - 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. Редкие посетители их ставят, так что можно сказать - правая и средняя кнопка не юзабельны для ряда браузеров.

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

Последовательность генерации

Левый одиночный клик

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

Правый одиночный клик

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

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

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

Средний клик

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

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

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

Двойной клик

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

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

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

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

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

Двойной правый клик

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

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

Двойной средний клик

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

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

mouseover, mouseout и mousemove

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

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

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

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

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

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

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

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

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

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

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

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

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