События мыши: последовательность наступления
В этой статье описываются виды и свойства мышиных событий, особенности обработки в различных браузерах и возможности по их перехвату.
К разным кнопкам браузеры привязывают свои собственные "действия по-умолчанию", например - 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 | Да | Да | Да |
Последовательность генерации
Левый одиночный клик
Во всех браузерах при клике мышью генерируются события:
| Все браузеры | |
| ВНИЗ |
|
| ВВЕРХ |
|
Правый одиночный клик
Правую кнопку мыши можно использовать в IE, Firefox и Konqueror. Для остальных браузеров обычно
применяют оригинальное решение: вместо правого клика предлагается shift+click.
| Internet Explorer | Firefox Win | Firefox Lin | Opera 9 и Konqueror | Safari Win | |
| ВНИЗ |
|
|
|
|
|
| ВВЕРХ |
|
|
|
|
|
Заметим, что событие 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 | |
| ВНИЗ |
|
|
| ВВЕРХ |
|
|
Двойной клик
Обработка двойных кликов важна, даже если Вы не собираетесь их использовать. Например, Internet Explorer генерирует при двойном клике - одно событие click, а Firefox - два.
Вот полная картина происходящего:
Двойной левый клик
| Internet Explorer | Firefox, Opera и Safari Win | Konqueror | |
| ВНИЗ |
|
|
|
| ВВЕРХ |
|
|
|
| ВНИЗ |
|
|
|
| ВВЕРХ |
|
|
|
Заметим, что Internet Explorer не генерирует mousedown на втором нажатии.
Двойной правый и двойной средний клик почти не используюся в современных интерфейсах, но рассмотрим и их тоже - оригинальные решения в Web часто бывают к месту 
Двойной правый клик
| Internet Explorer, Firefox Win | Firefox Lin, Opera | Safari Win | Konqueror | |
| ВНИЗ |
|
|
|
|
| ВВЕРХ |
|
|
|
|
| ВНИЗ |
|
|
|
|
| ВВЕРХ |
|
|
|
|
К счастью, здесь Internet Explorer не пропускает второе событие mousedown.
Все браузеры, кроме Safari (тестировалось под Windows) считают два правых клика - двумя кликами по очереди, а не dblclick.
Двойной средний клик
И, наконец, двойной клик средней кнопкой, которая юзабельна только в Internet Explorer, Konqueror и Safari Win.
Как и в случае с правой кнопкой, этот клик обычно считается за два обычных.
| Internet Explorer | Safari Win | Firefox, Opera, Konqueror | |
| ВНИЗ |
|
|
|
| ВВЕРХ |
|
|
|
| ВНИЗ |
|
|
|
| ВВЕРХ |
|
|
|
mouseover, mouseout и mousemove
События mouseover и mouseout срабатывают каждый раз, когда мышь заходит на элемент или выходит с него.
Событие mousemove срабатывает при каждом передвижении мыши. Если Вы пишите код для обработки mousemove - постарайтесь сделать его достаточно быстрым, иначе при передвижении курсора будут заметны тормоза.
Порядок и частота
При переходе с внешнего элемента на внутренний, фиксируется событие onmouseout для внешнего и onmouseover для внутреннего. Смысл в том, что мышь находится ровно "в одном элементе" одновременно: в ближайшем(по z-index) и самом глубоком.
Эти события обладают еще одним забавным свойством. А именно - частота их регистрации соответствует скорости движения мыши. Как браузер успеет зарегистрировать событие - так и получится.
Можно зайти во внутренний элемент, не проходя через внешний.
Иначе говоря, если мышь движется быстро, то события для внешнего элемента могут оказаться пропущенными.
Точно также можно выйти из внутреннего элемента, не проходя через внешний. Всего-то надо быстро двигать мышкой 
.
Текстовые элементы
Было замечено, что Safari странно обрабатывает mouseover/mouseout при проходе над текстовыми элементами, регистрирует для них события и т.п.
В этом случае можно фильтровать лишние события, проверяя реальное положение мыши.