События мыши: последовательность наступления
В этой статье описываются виды и свойства мышиных событий, особенности обработки в различных браузерах и возможности по их перехвату.
К разным кнопкам браузеры привязывают свои собственные "действия по-умолчанию", например - 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 срабатывает при каждом передвижении мыши. Если Вы пишите код для обработки mousemove - постарайтесь сделать его достаточно быстрым, иначе при передвижении курсора будут заметны тормоза.
При переходе с внешнего элемента на внутренний, фиксируется событие onmouseout для внешнего и onmouseover для внутреннего. Смысл в том, что мышь находится ровно "в одном элементе" одновременно: в ближайшем(по z-index) и самом глубоком.
Эти события обладают еще одним забавным свойством. А именно - частота их регистрации соответствует скорости движения мыши. Как браузер успеет зарегистрировать событие - так и получится.
Можно зайти во внутренний элемент, не проходя через внешний.
Иначе говоря, если мышь движется быстро, то события для внешнего элемента могут оказаться пропущенными.
Точно также можно выйти из внутреннего элемента, не проходя через внешний. Всего-то надо быстро двигать мышкой  .
Тестовый скрипт.
Было замечено, что Safari странно обрабатывает mouseover/mouseout при проходе над текстовыми элементами, регистрирует для них события и т.п.
В этом случае можно фильтровать лишние события, проверяя реальное положение мыши.
Тестовый скрипт.
|
В 3 версии Firefox события для правой кнопки:
mousedown which=3 button=2
mouseup which=3 button=2
contextmenu which=3 button=2
А не так, как в описании.
Объясните мне, как предотвратить прокрутку страницы за пределы div. Элемент div позволяет прокручивать изображения по горизонтали, и когда вы дойдете до конца страницы, вся страница также начнет прокручиваться. Как всегда, я ценю это. redactle unlimited
Пример тест стенд работает только в IE и FF. В Opera неработает!!!
что именно не работает в opera ?
не работает правый клик
И не должен. Это фишка оперы.
В настройках Javascript нужно поставить галку "Разрешить перехват щелчков правой кнопки мыши", получится:
mousedown which=3 button=2
mouseup which=3 button=2
Гм, Firefox 1.0.8, 1.5.0.x, 2.0.0.x, 3.x под Windows:
нажал – отпустил – контекстное меню
При этом под Linux контекстное меню показывается сразу после «нажал» – по крайней мере, в 2.0.0.x.
Да, это замечание убрал. В части по FF есть еще неточности ?
На ту же тему:
Правый одиночный клик (таблица)
Firefox (Windows):
вниз: mousedown
вверх: mouseup, contextmenu
Простенький скрипт для проверки
Двойной правый клик (таблица)
Аналогично:
вниз: mousedown
вверх: mouseup, contextmenu
вниз: mousedown
вверх: mouseup, contextmenu
А вот что будет в Firefox под Linux надо проверять (скорее всего, как раз как в таблицах)...
Да, так и есть.. Поведение Firefox зависит от операционной системы.
Сделал в таблице дополнительную колонку для Firefox Win/Lin.
Это фишка Линукса в принципе!
Там любое событие происходит при нажатии, а не отпускании клавиш. Зашито в ядро. (например переключение языка)
IE6:
держим левую/правую и жмем правую/левую - event.button = 3
держим левую и жмем среднюю - event.button = 5
держим правую и жмем среднюю - event.button = 6
держим левую и правую и жмем среднюю - event.button = 7
это все при mousedown
Двоичная арифметика. Здесь клавиши как битовые флаги, соответственно левая=1(как 2 в нулевой степени)+правая=2(как 2 в первой степени)=3
Все взято из соответствующих сообщений ОС Win.
Интересно попробовать - спасибо.
Хотелось бы узнать о возможности скрипта в IE, который бы понимал левый клик мышки по объекту, включающему ссылку на новую вкладку, как клик колесиком мышки
I agree with everything you've said. thanks. fencing companies in abilene tx
yse! fence companies in spartanburg sc
можно ли прервать onfocus на mousedown, mouseup
при клике на ссылку, кнопку, инпут, или onfocus наступает раньше всех?
Опера не нужна. Не надо ничего подкручивать для Оперы, он уйдет в прошлое.
Проблема с 11-ой оперой. Нажимаю на любую ссылку колёсиком мышки - открываются 2 вкладки одинакового содержания, в 10-ой опере такого не было, все настройки облазил - ничего не нашёл. Где и что изменить, подскажите пожалуйста.
та же проблема(((
Как отключить двойной вызов события click после события dblclick в Firefox? Нужно чтобы обрабатывался именно двойной клик иначе он одинарного, сейчас во время двойного клика просто 2 раза вызывается событие click, несмотря на то, что я поставил обработчик ondblclick.
Привет!
Можно запретить срабатывание событий mouseover и mouseout при переходе на внутренний элемент из внешнего, для которого эти события срабатывают?
Спасибо
Скажите, пожайлуста, как при наезде на див отменить прокрутку страницы скролом? В диве реализуется горизонтальная прокрутка картинок и, когда прокрутка упирается в конец, начинается прокрутка всей страницы. Спасибо.
Подскажите пожалуйста, как мне обработать событие hover (на div) при том условие, что была зажата кнопка мыши (mousedown) и соответственно лишь при этом условии выполнить заданную функцию. И не выполнять ее если событие hover произошло без события mousedown
Нужно писать обработчики, как тут.
Israel withdrew ufa1688 from Gaza in 2005 but, ufabet เข้า สู่ระบบ with the help of Egypt, clamps 1688.com down on the borders of the ทางเข้า Ufa 1688 enclave now governed by แทงบอลออนไลน์ Hamas Islamists. Dream Gaming Palestinian Big gamingauthorities have limited self-rule ลิงค์รับทรัพย์ in the West Bank บาคาร่าwhich is dotted หวยออนไลน์with Israeli settlements.
Hi there, I am here to find new friends who love playing online games. We can make friends and play idle mining empire in our free time. It's so funny, let's try it!
Glad you set up this post. It is very useful for everyone. Numberle and 5 letter words is a very fun word game. It's playing and learning at the same time
The word hurdle game is a fun and interactive way to practice your vocabulary. It's a great way to get students started on their reading skills.
This game can be played with a partner or in groups of up to four people. It's easy to set up and requires nothing more than a piece of paper, markers, and pencils.
You should also join fnaf 3, the best horror game out there!
The cladder games is a great way to not only help kids learn new words, but also get them thinking in different ways. These fun games first appeared in the early 1900s as a way to help kids with spelling. Later writers added new rules and gave them names like “Scramble Words,” “Knockout Word,” and “Scramble Sentences.”
Along with pre-written essay writing papers, we provide our precious students in the UK a highly professional custom essay writing help online service. Our trained pros write according to the customer's instructions, meeting the exact word limit and creating on the grounds they want. Whatever topic you choose, you will receive the best online English essay writer UK.
People who are not involved in business planning and management are unaware of an entrepreneur's difficulties. A high quality professional business plans writing service must discover not only a concept but also a means for it to come to life and bear fruit in real life. Because the world is continuously changing, you cannot be prepared for everything, therefore adaptability skills and resources are essential. As a student, you definitely won't be able to avoid all hazards and write completely appropriate business ideas like a business plan for restaurant
Great information, I will recommend it to my friends for them to check out. Thanks for sharing! If you have more time, please visit: wheel spinner
efef
Education always updates when you try to study more about future needs, then education first consulting is best to help to grow your knowledge that helps out for career in UAE.
instead you need to be engaged in these networks actively by posting updates, commenting on other posts, liking photos and more. However, there are still some sites that have yet to reach the level of activity they once had. In an effort to make up for this discrepancy, many marketers
I love informative articles and it's great that I read your post contexto game because what you share makes me very interested. fall guys
There are numerous online games that keep us entertained; in my spare time, I frequently play puppet hockey. It's a fascinating hockey game.
Your article was thought-provoking tunnel rush and sparked a lot of new ideas for me.
Your article provides FNF valuable and Friday Night Funkin' actionable advice. I think it will help many people.
Your blog is the most popular in school. Many students enjoy reading your blog. I will share with students from other schools. I think you have a lot of interesting articles on your blog. 메이저토토사이트
I feel so lucky to have read your post so soon. It gave me a lot of useful information. Thank you and I suggest you learn more about connections game
Different web browsers may handle mouse events and their madalin stunt cars 3 associated default actions differently. For example, in Firefox, clicking the middle mouse button may open a new tab. The specifics of default actions vary across browsers.
I recommend only good and reliable information, so see it: Connections Game
It has always been a debate whether to buy new or used construction equipment. Smaller fleets prefer to buy used construction equipment as they attract less capital investments. Another reason for people to opt for used construction equipment is that they are sometimes as good as new and come at a very heavy discounted price as compared to that offered at the showrooms.
Good job! For those who enjoy speed on endless tracks, there is drift boss unblocked. You get more points the longer you use the platform.
This is a good post. This post gives truly quality information. I’m definitely going to look into it. Really very useful tips are provided here. Thank you so much. Keep up the good works Suika
I like and appreciate your articles. The first time I read your articles, I was impressed by the very good way of writing and creating content in the articles. wordle hint
Отправить комментарий
Приветствуются комментарии:- Полезные.
- Дополняющие прочитанное.
- Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.Для остальных вопросов и обсуждений есть форум.