Javascript.RU

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

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 срабатывает при каждом передвижении мыши. Если Вы пишите код для обработки mousemove - постарайтесь сделать его достаточно быстрым, иначе при передвижении курсора будут заметны тормоза.

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

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

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

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

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

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

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

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

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


Автор: Dexter (не зарегистрирован), дата: 18 июля, 2008 - 11:58
#permalink

В 3 версии Firefox события для правой кнопки:
mousedown which=3 button=2
mouseup which=3 button=2
contextmenu which=3 button=2
А не так, как в описании.


Автор: GUeSt (не зарегистрирован), дата: 21 июля, 2008 - 11:33
#permalink

Пример тест стенд работает только в IE и FF. В Opera неработает!!!


Автор: Илья Кантор, дата: 21 июля, 2008 - 19:12
#permalink

что именно не работает в opera ?


Автор: Гость (не зарегистрирован), дата: 7 августа, 2008 - 17:09
#permalink

не работает правый клик


Автор: Илья Кантор, дата: 7 августа, 2008 - 19:31
#permalink

И не должен. Это фишка оперы.


Автор: Гость (не зарегистрирован), дата: 13 декабря, 2008 - 00:21
#permalink

В настройках Javascript нужно поставить галку "Разрешить перехват щелчков правой кнопки мыши", получится:

mousedown which=3 button=2
mouseup which=3 button=2


Автор: Infocatcher (не зарегистрирован), дата: 11 августа, 2008 - 00:23
#permalink

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

Гм, Firefox 1.0.8, 1.5.0.x, 2.0.0.x, 3.x под Windows:
нажал – отпустил – контекстное меню
При этом под Linux контекстное меню показывается сразу после «нажал» – по крайней мере, в 2.0.0.x.


Автор: Илья Кантор, дата: 11 августа, 2008 - 14:10
#permalink

Да, это замечание убрал. В части по FF есть еще неточности ?


Автор: Infocatcher (не зарегистрирован), дата: 12 августа, 2008 - 02:01
#permalink

На ту же тему:

Правый одиночный клик (таблица)

Firefox (Windows):
вниз: mousedown
вверх: mouseup, contextmenu

Простенький скрипт для проверки

Двойной правый клик (таблица)

Аналогично:
вниз: mousedown
вверх: mouseup, contextmenu
вниз: mousedown
вверх: mouseup, contextmenu

А вот что будет в Firefox под Linux надо проверять (скорее всего, как раз как в таблицах)...


Автор: Илья Кантор, дата: 12 августа, 2008 - 10:15
#permalink

Да, так и есть.. Поведение Firefox зависит от операционной системы.

Сделал в таблице дополнительную колонку для Firefox Win/Lin.


Автор: goldserg (не зарегистрирован), дата: 23 октября, 2008 - 16:11
#permalink

Это фишка Линукса в принципе!
Там любое событие происходит при нажатии, а не отпускании клавиш. Зашито в ядро. (например переключение языка)


Автор: Гость (не зарегистрирован), дата: 11 декабря, 2008 - 19:47
#permalink

IE6:

держим левую/правую и жмем правую/левую - event.button = 3
держим левую и жмем среднюю - event.button = 5
держим правую и жмем среднюю - event.button = 6
держим левую и правую и жмем среднюю - event.button = 7

это все при mousedown


Автор: Литий (не зарегистрирован), дата: 5 марта, 2009 - 11:45
#permalink

Двоичная арифметика. Здесь клавиши как битовые флаги, соответственно левая=1(как 2 в нулевой степени)+правая=2(как 2 в первой степени)=3
Все взято из соответствующих сообщений ОС Win.


Автор: Гаврила (не зарегистрирован), дата: 2 апреля, 2009 - 21:19
#permalink

Интересно попробовать - спасибо.


Автор: -юрий- (не зарегистрирован), дата: 11 декабря, 2009 - 01:21
#permalink

Хотелось бы узнать о возможности скрипта в IE, который бы понимал левый клик мышки по объекту, включающему ссылку на новую вкладку, как клик колесиком мышки


Автор: coldman666 (не зарегистрирован), дата: 16 марта, 2010 - 20:39
#permalink

можно ли прервать onfocus на mousedown, mouseup
при клике на ссылку, кнопку, инпут, или onfocus наступает раньше всех?


Автор: Гость (не зарегистрирован), дата: 9 ноября, 2010 - 01:09
#permalink

Опера не нужна. Не надо ничего подкручивать для Оперы, он уйдет в прошлое.


Автор: Гость (не зарегистрирован), дата: 20 декабря, 2010 - 21:32
#permalink

Проблема с 11-ой оперой. Нажимаю на любую ссылку колёсиком мышки - открываются 2 вкладки одинакового содержания, в 10-ой опере такого не было, все настройки облазил - ничего не нашёл. Где и что изменить, подскажите пожалуйста.


Автор: Гость (не зарегистрирован), дата: 28 июля, 2012 - 09:12
#permalink

та же проблема(((


Автор: Kosta (не зарегистрирован), дата: 30 июля, 2011 - 23:50
#permalink

Как отключить двойной вызов события click после события dblclick в Firefox? Нужно чтобы обрабатывался именно двойной клик иначе он одинарного, сейчас во время двойного клика просто 2 раза вызывается событие click, несмотря на то, что я поставил обработчик ondblclick.


Автор: Dimarik (не зарегистрирован), дата: 2 апреля, 2012 - 19:24
#permalink

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


Автор: Гость (не зарегистрирован), дата: 29 августа, 2012 - 18:27
#permalink

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


Автор: Sadus (не зарегистрирован), дата: 16 апреля, 2013 - 09:12
#permalink

Подскажите пожалуйста, как мне обработать событие hover (на div) при том условие, что была зажата кнопка мыши (mousedown) и соответственно лишь при этом условии выполнить заданную функцию. И не выполнять ее если событие hover произошло без события mousedown


Автор: Sadus (не зарегистрирован), дата: 7 ноября, 2013 - 12:37
#permalink

Просто я хочу отсосать одному парню, так сказать обработать его агрегат, а для этого мне нужно уметь


Автор: Гость (не зарегистрирован), дата: 7 ноября, 2013 - 21:37
#permalink

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


Автор: Гость (не зарегистрирован), дата: 30 июня, 2015 - 23:23
#permalink
echo "Хуй";

Автор: Гость (не зарегистрирован), дата: 3 июля, 2016 - 04:58
#permalink

Проиграл с мамкиного хацкера.


Автор: Гость (не зарегистрирован), дата: 1 июля, 2016 - 13:28
#permalink

alert "Хуй";


Автор: Гость (не зарегистрирован), дата: 1 июля, 2016 - 15:10
#permalink

Какие слова еще знаете?


Автор: Гость (не зарегистрирован), дата: 1 июля, 2016 - 15:46
#permalink

хуй


Автор: Гость (не зарегистрирован), дата: 1 июля, 2016 - 17:32
#permalink

Ждем режиссерскую версию бетмАна против супермАна.
После 16 июля.


Автор: Гость (не зарегистрирован), дата: 3 июля, 2016 - 04:59
#permalink

Лучше бы спуди мума против бутмана.


Автор: Гость (не зарегистрирован), дата: 24 ноября, 2016 - 10:34
#permalink

так а где обработка событий? где код?


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
6 + 13 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Реклама
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum