какое событие позволяет выполнять код после щелчка мыши
События мыши
Ранее в скриптах мы с вами часто использовали событие click – щелчок левой кнопкой мыши. В действительности – это составное событие, то есть, мы сначала нажимаем левую кнопку, затем отпускаем и только потом генерируется событие click. Причем в момент нажатия и отпускания кнопки возникают свои события:
mousedown/mouseup – нажатие и отпускание кнопки мыши.
Давайте в этом убедимся, возьмем вот такой HTML-документ:
В нем прописаны три обработчика на события click, mousedown и mouseup. Теперь кликнем по документу и в консоли увидим эти три события в порядке:
mousedown → mouseup → click
И это стандартизированный порядок: данные события возникают именно в такой последовательности. Для двойного клика тоже есть свое событие dblclick. Добавим его:
Теперь при двойном щелчке левой кнопкой мыши, мы видим такие события:
mousedown → mouseup → click → mousedown → mouseup → click → dblclick
Эта последовательность также стандартизирована и события следуют друг за другом именно в таком порядке.
Теперь мы знаем какая кнопка мыши была нажата при возникновении данных событий.
Обрабатывать их достаточно просто, например так:
Мы здесь увидим сообщение «click» только если при клике были нажаты клавиши Shift и Ctrl.
Обратите внимание, когда мы пишем браузерные скрипты, то предполагаем, что они могут быть запущены на самых разных компьютерах с разными ОС, в том числе и Mac OS. Так вот, в ОС Mac пользователи вместо клавиши Ctrl нажимают на клавишу Cmd. И это следует учесть в скрипте, например, так:
Здесь мы проверяем не только Ctrl, но и свойство metaKey, отвечающее за нажатие на кнопку Cmd.
Также не нужно забывать и про пользователей мобильных устройств с отсутствующей клавиатурой. Так что они вряд ли смогут перемещать курсор мыши с нажатой клавишей Shift!
Например, для события mousemove будем выводить координаты курсора мыши в консоль:
Аналогично работают свойства pageX/pageY.
Например, у нас есть вот такое содержимое страницы:
И добавим обработчик события mouseover:
Давайте посмотрим, как это все будет работать. Объясняем.
Изменим в обработчике событие на mouseout и обновим документ. Видите, эти свойства работают именно так, что логично, так как событие mouseout возникает при покидании элемента, значит target будет тем элементом, с которого мы ушли, а relatedTarget – элементом где мы сейчас находимся.
То при наведении курсора на дочерний элемент p, увидим событие mouseover. Причем при переходе с дочернего элемента и обратно также генерируется это событие.
Если же мы хотим чтобы событие возникало один раз при наведении на него курсора мыши, то можно воспользоваться эквивалентными событиями:
mouseenter и mouseleave
Например, заменим событие mouseover на mouseenter, получим. Смотрите, теперь при переходе между дочерним элементом и div дополнительных событий не возникает. Аналогично работает и mouseleave.
Из-за того, что события mouseenter и mouseleave не всплывают, они не могут быть делегированы обработчику верхнего уровня, например, для объекта document:
так работать не будет. Но, если прописать событие
то мы его успешно перехватываем. Вот эти ограничения следует учитывать при использовании событий mouseenter и mouseleave.
Итак, на этом занятии мы с вами рассмотрели работу следующих событий мыши:
Также мы с вами рассмотрели следующие свойства объекта event:
Видео по теме
JavaScipt (DOM) #1: объектная модель документа DOM и BOM
JavaScipt (DOM) #3: методы поиска элементов в DOM: querySelector, querySelectorAll, getElementById
JavaScipt (DOM) #4: свойства DOM-узлов: nodeName, innerHTML, outerHTML, data, textContent, hidden
JavaScipt (DOM) #5: работа с нестандартными свойствами DOM-элементов: getAttribute, setAttribute, dataset
JavaScipt (DOM) #6: создание и добавление элементов DOM createElement, append, remove, insertAdjacentHTML
JavaScipt (DOM) #9: HTML-документ: размеры (clientWidth, innerWidth), положение (pageYOffset, scrollBy)
JavaScipt (DOM) #11: обработчики событий: onclick, addEventListener, removeEventListener, event
JavaScipt (DOM) #12: погружение и всплытие событий: stopPropagation, stopImmediatePropagation, eventPhase
JavaScipt (DOM) #14: события мыши mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter
JavaScipt (DOM) #15: события клавиатуры keydown, keyup, событие скроллинга scroll
JavaScipt (DOM) #18: события change, input, cut, copy, paste, submit элементов input и select
JavaScipt (DOM) #20: события load, error; атрибуты async, defer тега script
JavaScipt (DOM) #21: пример предзагрузки изображений с помощью javascript
JavaScipt (DOM) #22: пример создания начала игры арканоид
© 2021 Частичное или полное копирование информации с данного сайта для распространения на других ресурсах, в том числе и бумажных, строго запрещено. Все тексты и изображения являются собственностью сайта
Javascript события мыши
Введение
События mousedown, mouseup и click
Когда пользователь кликает на элемент, то срабатывает не меньше чем 3 события мыши в таком порядке:
Помните, что если вы используете alert’ы, то браузер может запутаться и потерять порядок выполняющихся событий и количество их вызовов.
Событие dblclick (двойной клик)
Событие dblclick используется намного реже всех остальных событий мыши. Если Вы всетаки используете его, убедитесь в том, что не используете обработчики событий onclick и ondblclick для одного и того же HTML элемента. Определить что сделал пользователь практически невозможно в таком случае.
Mousemove событие
Mouseover и mouseout события
Тем не менее, как Вы видите, это событие срабатывает и при наведении курcора мыши на элемент№2 и даже span.
Причина такого поведение в том, что событие установленное на первый элементы также применяется к его дочерним нодам. Все предельно ясно, но проблема возникает тогда, когда нам надо совершить какое-то действие при переходе курсора мышки, например, от элемента span к элементу№2.
«Откуда пришла мышь?» или свойства relatedTarget, fromElement и toElement
Microsoft создали два ствойства чтобы хранить эту информацию:
Кроссбраузерный код
В случае ипользования события mouseout (элемент, к которому движется курсор):
Mouseenter и mouseleave
Ну вот и все о чем я хотел рассказать касательно Javascript событий мыши. С удовольствием отвечу на ваши комментарии.
Если Вам понравилась статья, проголосуйте за нее
Голосов: 6 Голосовать 
Форум
Справочник
События мыши: последовательность наступления
В этой статье описываются виды и свойства мышиных событий, особенности обработки в различных браузерах и возможности по их перехвату.
Виды кликов-событий
mousedown Нажатие на кнопку мыши mouseup Нажатая кнопка мыши отпущена click Клик мыши dblclick Двойной клик contextmenu Правый клик
События mousedown и mouseup в основном используются, когда идет нажатие на кнопку, перемещение, а потом мышь отпускается. Например, при выделении текста, или переносе объекта.
А события click и dblclick в основном нужны для работы с простыми кликами. Клик происходит при последовательных mousedown->mouseup на одном и том же объекте. Если Вы передвините мышь куда-то между mousedown и mouseup, то событие click не произойдет.
Событие contextmenu возникает при правом клике мышью, и по умолчанию вызывает контекстное меню. Не на всех браузер показ меню можно отключить.
Возможность отключения реакции браузера
Но javascript позволяет своим обработчикам событий останавливать обработку событий, так чтобы исключить «родную» реакцию браузера.
Все браузеры позволяют отключать реакцию по умолчанию на левую кнопку мыши.
Фрагмент кода кроссбраузерного обработчика выглядит следующим образом:
Вот сводная таблица по возможности отключения родной реакции браузера:
| Левая кнопка | Средняя кнопка | Правая кнопка | |
| Internet Explorer | Да | Да | Да |
| Firefox | Да | Править конфиг | Да |
| Safari Win | Да | Да | Да |
| Opera | Да | Нет | Нет |
| Konqueror | Да | Да | Да |
Последовательность генерации
Левый одиночный клик
Во всех браузерах при клике мышью генерируются события:
Правый одиночный клик
Правую кнопку мыши можно использовать в IE, Firefox и Konqueror. Для остальных браузеров обычно
применяют оригинальное решение: вместо правого клика предлагается shift+click.
Заметим, что событие click для правой кнопки мыши генерируется только в Safari, который обрабатывает правую кнопку точно так же, как левую.
Средний клик
Однако, в Firefox и Opera к среднему клику привязаны свои действия по умолчанию, которые нельзя отключить через javascript.
Поэтому реально средний клик юзабелен лишь в Internet Explorer и Konqueror.
Двойной клик
Вот полная картина происходящего:
Двойной левый клик
Заметим, что Internet Explorer не генерирует mousedown на втором нажатии.
Двойной правый клик
К счастью, здесь Internet Explorer не пропускает второе событие mousedown.
Двойной средний клик
И, наконец, двойной клик средней кнопкой, которая юзабельна только в Internet Explorer, Konqueror и Safari Win.
Как и в случае с правой кнопкой, этот клик обычно считается за два обычных.
mouseover, mouseout и mousemove
События mouseover и mouseout срабатывают каждый раз, когда мышь заходит на элемент или выходит с него.
Порядок и частота
При переходе с внешнего элемента на внутренний, фиксируется событие onmouseout для внешнего и onmouseover для внутреннего. Смысл в том, что мышь находится ровно «в одном элементе» одновременно: в ближайшем(по z-index) и самом глубоком.
Можно зайти во внутренний элемент, не проходя через внешний.
Иначе говоря, если мышь движется быстро, то события для внешнего элемента могут оказаться пропущенными.
Точно также можно выйти из внутреннего элемента, не проходя через внешний. Всего-то надо быстро двигать мышкой 
.
Текстовые элементы
Было замечено, что Safari странно обрабатывает mouseover / mouseout при проходе над текстовыми элементами, регистрирует для них события и т.п.
В этом случае можно фильтровать лишние события, проверяя реальное положение мыши.
В 3 версии Firefox события для правой кнопки:
mousedown which=3 button=2
mouseup which=3 button=2
contextmenu which=3 button=2
А не так, как в описании.
Пример тест стенд работает только в IE и FF. В Opera неработает.
не работает правый клик
И не должен. Это фишка оперы.
В настройках Javascript нужно поставить галку «Разрешить перехват щелчков правой кнопки мыши», получится:
mousedown which=3 button=2
mouseup which=3 button=2
Кроме того, событие 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.
Правый одиночный клик (таблица)
Firefox (Windows):
вниз: mousedown
вверх: mouseup, contextmenu
Двойной правый клик (таблица)
Аналогично:
вниз: mousedown
вверх: mouseup, contextmenu
вниз: mousedown
вверх: mouseup, contextmenu
А вот что будет в Firefox под Linux надо проверять (скорее всего, как раз как в таблицах).
Да, так и есть.. Поведение Firefox зависит от операционной системы.
Сделал в таблице дополнительную колонку для Firefox Win/Lin.
Это фишка Линукса в принципе!
Там любое событие происходит при нажатии, а не отпускании клавиш. Зашито в ядро. (например переключение языка)
это все при mousedown
Двоичная арифметика. Здесь клавиши как битовые флаги, соответственно левая=1(как 2 в нулевой степени)+правая=2(как 2 в первой степени)=3
Все взято из соответствующих сообщений ОС Win.
Хотелось бы узнать о возможности скрипта в IE, который бы понимал левый клик мышки по объекту, включающему ссылку на новую вкладку, как клик колесиком мышки
I agree with everything you’ve said. thanks. fencing companies in abilene tx
Основы событий мыши
В этой главе мы более детально рассмотрим события мыши и их свойства.
Сразу заметим: эти события бывают не только из-за мыши, но и эмулируются на других устройствах, в частности, на мобильных, для совместимости.
Типы событий мыши
Мы можем разделить события мыши на две категории: «простые» и «комплексные».
Простые события
Самые часто используемые простые события:
mousedown/mouseup Кнопка мыши нажата/отпущена над элементом. mouseover/mouseout Курсор мыши появляется над элементом и уходит с него. mousemove Каждое движение мыши над элементом генерирует это событие. contextmenu Вызывается при попытке открытия контекстного меню, как правило, нажатием правой кнопки мыши. Но, заметим, это не совсем событие мыши, оно может вызываться и специальной клавишей клавиатуры.
…Есть также несколько иных типов событий, которые мы рассмотрим позже.
Комплексные события
Комплексные события состоят из простых, поэтому в теории мы могли бы без них обойтись. Но хорошо, что они существуют, потому что работать с ними очень удобно.
Порядок событий
Одно действие может вызвать несколько событий.
Кликните на кнопку ниже, и вы увидите события. Также попробуйте двойной клик.
В окне теста ниже все события мыши записываются, и если задержка между ними более 1 секунды, то они разделяются горизонтальной чертой.
Получение информации о кнопке: which
Есть три возможных значения:
Средняя кнопка сейчас – скорее экзотика, и используется очень редко.
Модификаторы: shift, alt, ctrl и meta
Все события мыши включают в себя информацию о нажатых клавишах-модификаторах.
Свойства объекта события:
Например, кнопка внизу работает только при комбинации Alt + Shift +клик:
Поэтому, если мы хотим поддерживать такие комбинации, как Ctrl +клик, то для Mac имеет смысл использовать Cmd +клик. Это удобней для пользователей Mac.
Комбинации клавиш на клавиатуре – это хорошее дополнение к рабочему процессу. Если у пользователя есть клавиатура – они работают. Ну а если на его устройстве её нет – должен быть другой способ сделать то же самое.
Координаты: clientX/Y, pageX/Y
Все события мыши имеют координаты двух видов:
Отключаем выделение
Двойной клик мыши имеет побочный эффект, который может быть неудобен в некоторых интерфейсах: он выделяет текст.
Например, двойной клик на текст ниже выделяет его в дополнение к нашему обработчику:
Если зажать левую кнопку мыши и, не отпуская кнопку, провести мышью, то также будет выделение, которое в интерфейсах может быть «не кстати».
Есть несколько способов запретить выделение, о которых вы можете прочитать в главе Selection и Range.
Теперь выделенный жирным элемент не выделяется при двойном клике, а также на нём нельзя начать выделение, зажав кнопку мыши.
Заметим, что текст внутри него по-прежнему можно выделить, если начать выделение не на самом тексте, а до него или после. Обычно это нормально воспринимается пользователями.
Если вы попытаетесь скопировать текст в
Конечно, пользователь имеет доступ к HTML-коду страницы и может взять текст оттуда, но не все знают, как это сделать.
Итого
События мыши имеют следующие свойства:
Действие по умолчанию события mousedown – начало выделения, если в интерфейсе оно скорее мешает, его можно отменить.
В следующей главе мы поговорим о событиях, которые возникают при передвижении мыши, и об отслеживании смены элементов под указателем.
Задачи
Выделяемый список
Создайте список, в котором элементы могут быть выделены, как в файловых менеджерах.
События мыши
Основной способ реагирования на ввод с помощью мыши заключается в обработке событий мыши. В следующей таблице показаны события мыши и описание их возникновения.
| Событие мыши | Описание |
|---|---|
| Click | Это событие возникает при отпускании кнопки мыши, как правило, перед событием MouseUp. Обработчик этого события принимает аргумент типа EventArgs. Обрабатывать это событие следует в случае, если нужно только определить, когда происходит щелчок. |
| MouseClick | Это событие возникает, когда пользователь щелкает элемент управления. Обработчик этого события принимает аргумент типа MouseEventArgs. Обрабатывать это событие следует в случае, когда необходимо получить сведения о мыши при щелчке. |
| DoubleClick | Это событие происходит при двойном щелчке элемента управления. Обработчик этого события принимает аргумент типа EventArgs. Обрабатывать это событие следует в случае, если нужно только определить, когда происходит двойной щелчок. |
| MouseDoubleClick | Это событие возникает, когда пользователь дважды щелкает мышью. Обработчик этого события принимает аргумент типа MouseEventArgs. Обрабатывать это событие следует в случае, когда необходимо получить сведения о мыши при двойном щелчке. |
| MouseDown | Это событие происходит при нажатии пользователем кнопки мыши, когда указатель мыши находится на элементе управления. Обработчик этого события принимает аргумент типа MouseEventArgs. |
| MouseEnter | Это событие возникает, когда указатель мыши перемещается на границу или клиентскую область элемента управления в зависимости от типа элемента управления. Обработчик этого события принимает аргумент типа EventArgs. |
| MouseHover | Это событие возникает при остановке и помещении указателя мыши на элемент управления. Обработчик этого события принимает аргумент типа EventArgs. |
| MouseLeave | Это событие возникает, когда указатель мыши покидает границу или клиентскую область элемента управления в зависимости от типа элемента управления. Обработчик этого события принимает аргумент типа EventArgs. |
| MouseMove | Это событие возникает при перемещении указателя мыши на элемент управления. Обработчик этого события принимает аргумент типа MouseEventArgs. |
| MouseUp | Это событие возникает, когда указатель мыши находится на элементе управления и пользователь отпускает кнопку мыши. Обработчик этого события принимает аргумент типа MouseEventArgs. |
| MouseWheel | Это событие возникает, когда пользователь вращает колесико мыши, когда фокус находится на элементе управления. Обработчик этого события принимает аргумент типа MouseEventArgs. Для определения того, насколько прокручено колесико мыши, можно использовать свойство Delta элемента MouseEventArgs. |
Сведения о мыши
Объект MouseEventArgs отправляется обработчикам событий мыши, связанных с нажатием кнопки мыши и отслеживанием ее движений. Объект MouseEventArgs предоставляет сведения о текущем состоянии мыши, включая положение указателя мыши в клиентских координатах, какие кнопки мыши нажаты и произошла ли прокрутка колесика мыши. Некоторые события мыши, например те, которые возникают, когда указатель мыши пересек границы элемента управления, отправляют обработчику событий объект EventArgs без подробных сведений.
Если нужно знать текущее состояние кнопок мыши или положение ее указателя, но при этом избежать обработки события мыши, можно также использовать свойства MouseButtons и MousePosition класса Control. Свойство MouseButtons возвращает сведения о том, какие кнопки мыши в настоящее время нажаты. Свойство MousePosition возвращает экранные координаты указателя мыши, которые эквивалентны значению, возвращаемому методом Position.
Преобразование между экранными и клиентскими координатами
Так как некоторые сведения о положении мыши представлены в клиентских координатах, а другие — в экранных, может потребоваться преобразовать точку из одной системы координат в другую. Это легко сделать с помощью методов PointToClient и PointToScreen, доступных в классе Control.
Стандартное поведение события щелчка
Если требуется обрабатывать события щелчка мыши в определенном порядке, необходимо знать порядок, в котором вызываются события щелчка в элементах управления Windows Forms. Когда любая поддерживаемая кнопка мыши нажимается и отпускается, все элементы управления Windows Forms, кроме отмеченных в списке ниже, вызывают события щелчка в одном и том же порядке. Ниже приведен порядок событий, вызываемых одинарным щелчком мыши.
Ниже приведен порядок событий, вызываемых двойным щелчком мыши.
Особые элементы управления
Поведение перечисленных ниже элементов управления при щелчке мыши не соответствует стандартному.
Если пользователь щелкает поле редактирования, кнопку или элемент в списке, то для элемента управления ComboBox возникают описанные ниже события.
Если пользователь щелкает любое место внутри этих элементов управления, то возникают описанные ниже события.
Указанные ниже события возникают только в том случае, если пользователь щелкает элементы в ListView. Если пользователь щелкает мышью в любом другом месте элемента управления, то события не вызываются. В дополнение к событиям, описанным ниже, существуют события BeforeLabelEdit и AfterLabelEdit, которые могут представлять интерес, если нужно выполнять проверку с помощью элемента управления ListView.
Указанные ниже события возникают только в том случае, если пользователь щелкает сами элементы или справа от них в элементе управления TreeView. Если пользователь щелкает мышью в любом другом месте элемента управления, то события не вызываются. В дополнение к событиям, описанным ниже, существуют события BeforeCheck, BeforeSelect, BeforeLabelEdit, AfterSelect, AfterCheck и AfterLabelEdit, которые могут представлять интерес, если нужно выполнять проверку с помощью элемента управления TreeView.
Поведение отрисовки для переключателей
Переключатели, такие как элементы управления, производные от класса ButtonBase, имеют описанное ниже нестандартное поведение отрисовки в сочетании с событиями щелчка.
Пользователь нажимает кнопку мыши.
Элемент управления отрисовывается в состоянии «нажато».
Пользователь отпускает кнопку мыши.
Элемент управления отрисовывается в состоянии «отпущено».
Если пользователь перемещает указатель за границы переключателя при нажатой кнопке мыши (например, перемещает указатель мыши за границы элемента управления Button, когда он нажат), переключатель будет отрисовываться в состоянии «отпущено» и происходит только событие MouseUp. События Click и MouseClick в этой ситуации не наступают.