Получение информации о кнопке which

Основы событий мыши

В этой главе мы более детально рассмотрим события мыши и их свойства.

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

Типы событий мыши

Мы можем разделить события мыши на две категории: «простые» и «комплексные».

Простые события

Самые часто используемые простые события:

mousedown/mouseup Кнопка мыши нажата/отпущена над элементом. mouseover/mouseout Курсор мыши появляется над элементом и уходит с него. mousemove Каждое движение мыши над элементом генерирует это событие. contextmenu Вызывается при попытке открытия контекстного меню, как правило, нажатием правой кнопки мыши. Но, заметим, это не совсем событие мыши, оно может вызываться и специальной клавишей клавиатуры.

…Есть также несколько иных типов событий, которые мы рассмотрим позже.

Комплексные события

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

Порядок событий

Одно действие может вызвать несколько событий.

Например, клик мышью вначале вызывает mousedown , когда кнопка нажата, затем mouseup и click , когда она отпущена.

В случае, когда одно действие инициирует несколько событий, порядок их выполнения фиксирован. То есть обработчики событий вызываются в следующем порядке: mousedown → mouseup → click .

Кликните на кнопку ниже, и вы увидите события. Также попробуйте двойной клик.

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

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

Получение информации о кнопке: which

События, связанные с кликом, всегда имеют свойство which , которое позволяет определить нажатую кнопку мыши.

Это свойство не используется для событий click и contextmenu , поскольку первое происходит только при нажатии левой кнопкой мыши, а второе – правой.

Но если мы отслеживаем mousedown и mouseup , то оно нам нужно, потому что эти события срабатывают на любой кнопке, и which позволяет различать между собой «нажатие правой кнопки» и «нажатие левой кнопки».

Есть три возможных значения:

  • event.which == 1 – левая кнопка
  • event.which == 2 – средняя кнопка
  • event.which == 3 – правая кнопка

Средняя кнопка сейчас – скорее экзотика, и используется очень редко.

Модификаторы: shift, alt, ctrl и meta

Все события мыши включают в себя информацию о нажатых клавишах-модификаторах.

Свойства объекта события:

  • shiftKey : Shift
  • altKey : Alt (или Opt для Mac)
  • ctrlKey : Ctrl
  • metaKey : Cmd для Mac

Они равны true , если во время события была нажата соответствующая клавиша.

Например, кнопка внизу работает только при комбинации Alt + Shift +клик:

В Windows и Linux клавишами-модификаторами являются Alt , Shift и Ctrl . На Mac есть ещё одна: Cmd , которой соответствует свойство metaKey .

В большинстве приложений, когда в Windows/Linux используется Ctrl , на Mac используется Cmd .

То есть, когда пользователь Windows нажимает Ctrl + Enter и Ctrl + A , пользователь Mac нажимает Cmd + Enter или Cmd + A , и так далее.

Поэтому, если мы хотим поддерживать такие комбинации, как Ctrl +клик, то для Mac имеет смысл использовать Cmd +клик. Это удобней для пользователей Mac.

Даже если мы и хотели бы заставить людей на Mac использовать именно Ctrl +клик, это довольно сложно. Проблема в том, что левый клик в сочетании с Ctrl интерпретируется как правый клик на MacOS и генерирует событие contextmenu , а не click как на Windows/Linux.

Поэтому, если мы хотим, чтобы пользователям всех операционных систем было удобно, то вместе с ctrlKey нам нужно проверять metaKey .

Для JS-кода это означает, что мы должны проверить if (event.ctrlKey || event.metaKey) .

Комбинации клавиш на клавиатуре – это хорошее дополнение к рабочему процессу. Если у пользователя есть клавиатура – они работают. Ну а если на его устройстве её нет – должен быть другой способ сделать то же самое.

Координаты: clientX/Y, pageX/Y

Все события мыши имеют координаты двух видов:

  1. Относительно окна: clientX и clientY .
  2. Относительно документа: pageX и pageY .

Например, если у нас есть окно размером 500×500, и курсор мыши находится в левом верхнем углу, то значения clientX и clientY равны 0 . А если мышь находится в центре окна, то значения clientX и clientY равны 250 независимо от того, в каком месте документа она находится и до какого места документ прокручен. В этом они похожи на position:fixed .

Наведите курсор мыши на поле ввода, чтобы увидеть clientX/clientY (пример находится в iframe , поэтому координаты определяются относительно этого iframe ):

Координаты относительно документа pageX , pageY отсчитываются не от окна, а от левого верхнего угла документа. Подробнее о координатах вы можете узнать в главе Координаты.

Отключаем выделение

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

Например, двойной клик на текст ниже выделяет его в дополнение к нашему обработчику:

Если зажать левую кнопку мыши и, не отпуская кнопку, провести мышью, то также будет выделение, которое в интерфейсах может быть «не кстати».

Есть несколько способов запретить выделение, о которых вы можете прочитать в главе Selection и Range.

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

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

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

Если мы хотим отключить выделение для защиты содержимого страницы от копирования, то мы можем использовать другое событие: oncopy .

Если вы попытаетесь скопировать текст в <div> , у вас это не получится, потому что срабатывание события oncopy по умолчанию запрещено.

Конечно, пользователь имеет доступ к HTML-коду страницы и может взять текст оттуда, но не все знают, как это сделать.

Итого

События мыши имеют следующие свойства:

Клавиши-модификаторы ( true если нажаты): altKey , ctrlKey , shiftKey и metaKey (Mac).

  • Если вы планируете обработать Ctrl , то не забудьте, что пользователи Mac обычно используют Cmd , поэтому лучше проверить if (e.metaKey || e.ctrlKey) .

Координаты относительно окна: clientX/clientY .

Координаты относительно документа: pageX/pageY .

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

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

Задачи

Выделяемый список

Создайте список, в котором элементы могут быть выделены, как в файловых менеджерах.

Источник



События мыши

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

mousedown/mouseup – нажатие и отпускание кнопки мыши.

Давайте в этом убедимся, возьмем вот такой HTML-документ:

В нем прописаны три обработчика на события click, mousedown и mouseup. Теперь кликнем по документу и в консоли увидим эти три события в порядке:

mousedown → mouseup → click

И это стандартизированный порядок: данные события возникают именно в такой последовательности. Для двойного клика тоже есть свое событие dblclick. Добавим его:

Теперь при двойном щелчке левой кнопкой мыши, мы видим такие события:

mousedown → mouseup → click → mousedown → mouseup → click → dblclick

Эта последовательность также стандартизирована и события следуют друг за другом именно в таком порядке.

  • event.which == 1 – левая кнопка;
  • event.which == 2 – средняя кнопка;
  • event.which == 3 – правая кнопка.

Теперь мы знаем какая кнопка мыши была нажата при возникновении данных событий.

  • event.shiftKey – true, если нажата клавиша Shift и false в противном случае;
  • event.altKey – true при нажатом Alt (или Opt для Mac) и false иначе;
  • event.ctrlKey – true при нажатом Ctrl и false иначе;
  • event.metaKey – true при нажатом Cmd (для Mac) и false иначе.
Читайте также:  Обучение детей игре на фортепиано что делать на первых уроках

Обрабатывать их достаточно просто, например так:

Мы здесь увидим сообщение «click» только если при клике были нажаты клавиши Shift и Ctrl.

Обратите внимание, когда мы пишем браузерные скрипты, то предполагаем, что они могут быть запущены на самых разных компьютерах с разными ОС, в том числе и Mac OS. Так вот, в ОС Mac пользователи вместо клавиши Ctrl нажимают на клавишу Cmd. И это следует учесть в скрипте, например, так:

Здесь мы проверяем не только Ctrl, но и свойство metaKey, отвечающее за нажатие на кнопку Cmd.

Также не нужно забывать и про пользователей мобильных устройств с отсутствующей клавиатурой. Так что они вряд ли смогут перемещать курсор мыши с нажатой клавишей Shift!

  • clientX/clientY – координаты курсора мыши относительно окна браузера;
  • pageX/pageY – координаты курсора мыши относительно HTML-документа.

Например, для события mousemove будем выводить координаты курсора мыши в консоль:

Аналогично работают свойства pageX/pageY.

  • mouseover – возникает при наведении курсора мыши на элемент HTML-документа;
  • mouseout – возникает при покидании курсора мыши элемента HTML-документа.

Например, у нас есть вот такое содержимое страницы:

И добавим обработчик события mouseover:

  • target – ссылка на объект над которым находится курсор мыши;
  • relatedTarget – ссылка на объект, с которого ушел курсор мыши.

Давайте посмотрим, как это все будет работать. Объясняем.

  • relatedTarget – ссылка на объект над которым находится курсор мыши;
  • target – ссылка на объект, с которого ушел курсор мыши.

Изменим в обработчике событие на mouseout и обновим документ. Видите, эти свойства работают именно так, что логично, так как событие mouseout возникает при покидании элемента, значит target будет тем элементом, с которого мы ушли, а relatedTarget – элементом где мы сейчас находимся.

События mouseover и mouseout всплывают от целевого элемента, где они произошли и доходят до корня DOM-дерева – объекта document. Например, если повесить событие mouseover на тег div:

То при наведении курсора на дочерний элемент p, увидим событие mouseover. Причем при переходе с дочернего элемента и обратно также генерируется это событие.

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

mouseenter и mouseleave

  1. Не всплывают.
  2. Событие mouseenter генерируется когда указатель оказывается над элементом и при этом не важно: потомок это элемента или сам элемент.
  3. Событие mouseleave срабатывает при покидании элемента целиком (дочерние элементы здесь не учитываются).

Например, заменим событие mouseover на mouseenter, получим. Смотрите, теперь при переходе между дочерним элементом и div дополнительных событий не возникает. Аналогично работает и mouseleave.

Из-за того, что события mouseenter и mouseleave не всплывают, они не могут быть делегированы обработчику верхнего уровня, например, для объекта document:

так работать не будет. Но, если прописать событие

то мы его успешно перехватываем. Вот эти ограничения следует учитывать при использовании событий mouseenter и mouseleave.

Источник

Javascript события мыши

В этой статье речь пойдет о Javascript событиях мыши. Эти события являются очень важными в Javascript и используются на каждом шагу. Сначала я расскажу вам о всех стандартных событиях связанных с мышкой: mousedown , mouseup , click , dblclick , mousemove и, наконец, mouseover и mouseout .

События mousedown, mouseup и click

Когда пользователь кликает на элемент, то срабатывает не меньше чем 3 события мыши в таком порядке:

  1. mousedown , пользователь нажал кнопку мыши на элементе
  2. mouseup , пользователь отпустил кнопку мыши на элементе
  3. click , обнаружены события mousedown и mouseup на элементе

В основном события mousedown и mouseup более полезны нежели click . Иногда пользователь кликает мышкой, но событие click не срабатывает.

Предположим, что пользователь нажал кнопку на ссылке, потом отвел курсор куда-то в сторону и отпустил кнопку. Ссылка обработала только mousedown событие. Также можно возпроизвести и противоположную ситуацию когда пользователь нажимает кнопку мыши, а потом наводит курсор на ссылку и отпускает кнопку. Срабатывает только mouseup событие. В остальных случаях срабатывает click .

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

Помните, что если вы используете alert’ы, то браузер может запутаться и потерять порядок выполняющихся событий и количество их вызовов.

Событие dblclick (двойной клик)

Событие dblclick используется намного реже всех остальных событий мыши. Если Вы всетаки используете его, убедитесь в том, что не используете обработчики событий onclick и ondblclick для одного и того же HTML элемента. Определить что сделал пользователь практически невозможно в таком случае.

Когда пользователь делает двойной клик на элементе сначала срабатывает событие click и только потом dblclick . Использование alert сообщений здесь также крайне опасно.

Mousemove событие

Событие mousemove работает нормально, но Вы должны помнить, что обработка такого рода событий может занимать некоторое количество времени. Событие mousemove срабатывает когда пользователь передвигает курсор мыши на один пиксель. Казалось бы ничего особенного не происходит, но внутри есть сложные функции, процес выполнение которых занимает длительный промежуток времени. Это может привести к нестабильной работе сайта. Поэтому лучше всего использовать обработчик события onmousemove , только там, где это действительно нужно, и обязательно удалять его в будущем.

Mouseover и mouseout события

Давайте рассмотрим небольшой пример. Попробуйте поводить курсор мышки поверх элементов с разным фоном. Элемент 1 должен слегка мигать при наведении на него курсором — это срабатывает событие mouseover .

Тем не менее, как Вы видите, это событие срабатывает и при наведении курcора мыши на элемент№2 и даже span.

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

«Откуда пришла мышь?» или свойства relatedTarget, fromElement и toElement

Ребята из W3C добавили свойство relatedTarget для событий mouseover и mouseout . Свойство содержит в себе элемент от которого пришел курсор мышки в случае mouseover и элемент к которому перешла мышь в случае mouseout. .

Microsoft создали два ствойства чтобы хранить эту информацию:

  • fromElement — относится к элементу от которого пришла мышь.
  • toElement — к элементу к которому пришла мышь.

Кроссбраузерный код

И так если Вы хотите знать откуда пришла мышка используя событие mouseover , ипользуйте следующий скрипт:

В случае ипользования события mouseout (элемент, к которому движется курсор):

Mouseenter и mouseleave

Microsoft предлагает другой способ решения проблемы. Они создали 2 новых события mouseenter и mouseleave . Эти события имеют такое же поведение как mouseover и mouseout . Единственно отличие — это то, что события не «перепрыгивают» на дочерние элементы. Это очень хорошо решает нашу проблему, представленную в примере.

Ну вот и все о чем я хотел рассказать касательно Javascript событий мыши. С удовольствием отвечу на ваши комментарии.

Источник

Мышь: клики, кнопка, координаты

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/mouse-events-basics.

В этой главе мы глубже разберёмся со списком событий мыши, рассмотрим их общие свойства, а также те события, которые связаны с кликом.

Типы событий мыши

Условно можно разделить события на два типа: «простые» и «комплексные».

Простые события

Комплексные события

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

Порядок срабатывания событий

Одно действие может вызывать несколько событий.

Например, клик вызывает сначала mousedown при нажатии, а затем mouseup и click при отпускании кнопки.

В тех случаях, когда одно действие генерирует несколько событий, их порядок фиксирован. То есть, обработчики вызовутся в порядке mousedown → mouseup → click .

Читайте также:  Как включить реальную клавиатуру

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

На тест-стенде ниже все мышиные события записываются, и если между событиями проходит больше 1 секунды, то они для удобства чтения отделяются линией. Также присутствуют свойства which/button , по которым можно определить кнопку мыши. Мы их рассмотрим далее.

Каждое событие обрабатывается независимо.

Например, при клике события mouseup + click возникают одновременно, но обрабатываются последовательно. Сначала полностью завершается обработка mouseup , затем запускается click .

Получение информации о кнопке: which

При обработке событий, связанных с кликами мыши, бывает важно знать, какая кнопка нажата.

Для получения кнопки мыши в объекте event есть свойство which .

На практике оно используется редко, т.к. обычно обработчик вешается либо onclick – только на левую кнопку мыши, либо oncontextmenu – только на правую.

Возможны следующие значения:

  • event.which == 1 – левая кнопка
  • event.which == 2 – средняя кнопка
  • event.which == 3 – правая кнопка

Это свойство не поддерживается IE8-, но его можно получить способом, описанным в конце главы.

Правый клик: oncontextmenu

Это событие срабатывает при клике правой кнопкой мыши:

При клике на кнопку выше после обработчика oncontextmenu будет показано обычное контекстное меню, которое браузер всегда показывает при клике правой кнопкой. Это является его действием по умолчанию.

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

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

Модификаторы shift, alt, ctrl и meta

Во всех событиях мыши присутствует информация о нажатых клавишах-модификаторах.

  • shiftKey
  • altKey
  • ctrlKey
  • metaKey (для Mac)

Например, кнопка ниже сработает только на Alt+Shift+Клик:

На компьютерах под управлением Windows и Linux есть специальные клавиши Alt , Shift и Ctrl . На Mac есть ещё одна специальная клавиша: Cmd , которой соответствует свойство metaKey .

В большинстве случаев там, где под Windows/Linux используется Ctrl , на Mac используется Cmd . Там, где пользователь Windows нажимает Ctrl + Enter или Ctrl + A , пользователь Mac нажмёт Cmd + Enter или Cmd + A , и так далее, почти всегда Cmd вместо Ctrl .

Поэтому, если мы хотим поддерживать сочетание Ctrl +click или другие подобные, то под Mac имеет смысл использовать Cmd +click. Пользователям Mac это будет гораздо комфортнее.

Более того, даже если бы мы хотели бы заставить пользователей Mac использовать именно Ctrl +click – это было бы затруднительно. Дело в том, что обычный клик с зажатым Ctrl под Mac работает как правый клик и генерирует событие oncontextmenu , а вовсе не onclick , как под Windows/Linux.

Решение – чтобы пользователи обоих операционных систем работали с комфортом, в паре с ctrlKey нужно обязательно использовать metaKey .

В JS-коде это означает, что для удобства пользователей Mac нужно проверять if (event.ctrlKey || event.metaKey) .

Координаты в окне: clientX/Y

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

Пара свойств clientX/clientY содержит координаты курсора относительно текущего окна.

При этом, например, если ваше окно размером 500×500, а мышь находится в центре, тогда и clientX и clientY будут равны 250.

Можно как угодно прокручивать страницу, но если не двигать при этом мышь, то координаты курсора clientX/clientY не изменятся, потому что они считаются относительно окна, а не документа.

Проведите мышью над полем ввода, чтобы увидеть clientX/clientY :

В той же системе координат работает и метод elem.getBoundingClientRect() , возвращающий координаты элемента, а также position:fixed .

Относительно документа: pageX/Y

Координаты курсора относительно документа находятся в свойствах pageX/pageY .

Так как эти координаты – относительно левого-верхнего узла документа, а не окна, то они учитывают прокрутку. Если прокрутить страницу, а мышь не трогать, то координаты курсора pageX/pageY изменятся на величину прокрутки, они привязаны к конкретной точке в документе.

В IE8- этих свойств нет, но можно получить их способом, описанным в конце главы.

Проведите мышью над полем ввода, чтобы увидеть pageX/pageY (кроме IE8-):

В той же системе координат работает position:absolute , если элемент позиционируется относительно документа.

Некоторые браузеры поддерживают свойства event.x/y , event.layerX/layerY .

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

Особенности IE8-

Двойной клик

Все браузеры, кроме IE8-, генерируют dblclick в дополнение к другим событиям.

  • mousedown (нажал)
  • mouseup+click (отжал)
  • mousedown (нажал)
  • mouseup+click+dblclick (отжал).

IE8- на втором клике не генерирует mousedown и click .

  • mousedown (нажал)
  • mouseup+click (отжал)
  • (нажал второй раз, без события)
  • mouseup+dblclick (отжал).

Поэтому отловить двойной клик в IE8-, отслеживая только click , нельзя, ведь при втором нажатии его нет. Нужно именно событие dblclick .

Свойство which/button

В старых IE8- не поддерживалось свойство which , а вместо него использовалось свойство button , которое является 3-х битным числом, в котором каждому биту соответствует кнопка мыши. Бит установлен в 1, только если соответствующая кнопка нажата.

Чтобы его расшифровать – нужна побитовая операция & («битовое И»):

  • !!(button & 1) == true (1-й бит установлен), если нажата левая кнопка,
  • !!(button & 2) == true (2-й бит установлен), если нажата правая кнопка,
  • !!(button & 4) == true (3-й бит установлен), если нажата средняя кнопка.

Что интересно, при этом мы можем узнать, были ли две кнопки нажаты одновременно, в то время как стандартный which такой возможности не даёт. Так что, в некотором смысле, свойство button – более мощное.

Можно легко сделать функцию, которая будет ставить свойство which из button , если его нет:

Свойства pageX/pageY

В IE до версии 9 не поддерживаются свойства pageX/pageY , но их можно получить, прибавив к clientX/clientY величину прокрутки страницы.

Более подробно о её вычислении вы можете прочитать в разделе прокрутка страницы.

Мы же здесь приведём готовый вариант, который позволяет нам получить pageX/pageY для старых и совсем старых IE:

Итого

События мыши имеют следующие свойства:

  • Кнопка мыши: which (для IE8-: нужно ставить из button )
  • Элемент, вызвавший событие: target
  • Координаты, относительно окна: clientX/clientY
  • Координаты, относительно документа: pageX/pageY (для IE8-: нужно ставить по clientX/Y и прокрутке)
  • Если зажата спец. клавиша, то стоит соответствующее свойство: altKey , ctrlKey , shiftKey или metaKey (Mac).
  • Для поддержки Ctrl + click не забываем проверить if (e.metaKey || e.ctrlKey) , чтобы пользователи Mac тоже были довольны.

Задачи

Дерево: проверка клика на заголовке

Есть кликабельное JavaScript-дерево UL/LI (см. задачу Раскрывающееся дерево).

При клике на заголовке его список его детей скрывается-раскрывается. Выглядит это так: (кликайте на заголовки)

Однако, проблема в том, что скрытие-раскрытие происходит даже при клике вне заголовка, на пустом пространстве справа от него.

Как скрывать/раскрывать детей только при клике на заголовок?

В задаче Раскрывающееся дерево это решено так: заголовки завёрнуты в элементы SPAN и проверяются клики только на них. Представим на минуту, что мы не хотим оборачивать текст в SPAN , а хотим оставить как есть. Например, по соображениям производительности, если дерево и так очень большое, ведь оборачивание всех заголовков в SPAN увеличит количество DOM-узлов в 2 раза.

Решите задачу без обёртывания заголовков в SPAN , используя работу с координатами.

Исходный документ содержит кликабельное дерево.

P.S. Задача – скорее на сообразительность, однако подход может быть полезен в реальной жизни.

Подсказка

У события клика есть координаты. Проверьте по ним, попал ли клик на заголовок.

Самый глубокий узел на координатах можно получить вызовом document.elementFromPoint(clientX, clientY).

…Но заголовок является текстовым узлом, поэтому эта функция для него работать не будет. Однако это, всё же, можно обойти. Как?

Подсказка 2

Можно при клике на LI сделать временный SPAN и переместить в него текстовый узел-заголовок.

После этого проверить, попал ли клик в него и вернуть всё как было.

На шаге 3 текстовый узел вынимается обратно из SPAN , всё возвращается в исходное состояние.

Источник

Браузерные события и примеры их использования в JavaScript

Все события JavaScript можно разделить на следующие категории: события мыши (Mouse Events), события клавиатуры (Keyboard Events), события объектов и фреймов (Frame/Object Events), события формы и элементов управления (Form Events), события перетаскивания (Drag Events), события анимации (Animation Events), события буфера обмена (Clipboard Events), события мультимедиа (Media Events), события трансформации (Transition Events), события, посылаемые сервером (Server-Sent Events), события касания (Touch Events), события печати (Print Events), разные события (Misc Events).

Читайте также:  Как включить подсветку клавиатуры на этой модели

События мыши

  • mousedown – при нажатии кнопки мыши;
  • mouseup – при отпускании кнопки мыши;
  • click – при клике (порядок возникновения событий при click : mousedown -> mouseup -> click );
  • dblclick – при двойном клике (порядок возникновения событий при dblclick : mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick );
  • mousemove – при перемещении курсора мыши;
  • mouseover – при вхождении курсора мыши в область, принадлежащей целевому элементу и других элементов, вложенных в него;
  • mouseenter – при вхождении указателя мыши в целевой элемент (в отличие от mouseover происходит только один раз при вхождении курсора в целевой элемент; при дальнейшем движении курсора и его вхождении в другие элементы (находящихся в целевом) – оно больше не возникает);
  • mouseout – при уходе курсора с целевого элемента и других элементов, вложенных в него;
  • mouseleave – при покидании границ целевого элемента (в отличие от mouseout не возникает при покидании курсора элементов вложенных в целевой);
  • contextmenu – при открытии контекстного меню.

События при CSS переходе

  • transitionrun – возникает при создании CSS перехода (т.е. когда он добавляется к набору запущенных переходов, но не обязательно он начался);
  • transitionstart – происходит, когда CSS переход начинает выполняться;
  • transitioncancel – возникает, если CSS переход был отменен;
  • transitionend – происходит при завершении CSS перехода.

События при CSS анимации

  • animationstart – происходит, когда CSS анимация начинается;
  • animationiteration – возникает, когда заканчивается одна итерация CSS анимации и начинается другая;
  • animationend – происходит при окончании CSS анимации.

События клавиатуры

Порядок возникновения событий: keydown -> keypress -> keyup .

  • keydown — событие происходит, когда нажата клавиша на клавиатуре над элементом, но ещё не отпущена.
  • keyup — событие происходит, когда нажатая клавиша на клавиатуре над элементом перешла в состояние отпущено.
  • keypress — событие происходит, когда пользователь нажал клавишу на клавиатуре над элементом.

События объектов и фреймов

  • beforeunload — событие происходит, перед тем как документ будет выгружен. Это событие позволяет отображать дополнительное сообщение в диалоговом окне подтверждения «Вы действительно хотите покинуть эту страницу?». Стандартное сообщение, которое появляется при закрытии документа, может отличаться в разных браузерах. Но его Вы не можете изменить или удалить, Вы можете только с помощью этого метода добавить к нему собственное сообщение, которое будет отображаться вместе с сообщением по умолчанию.
  • error — событие срабатывает при возникновении ошибки, которая происходит при загрузке внешнего файла (например, документа или изображения).
  • hashchange — событие происходит при изменении якорной части (начинается с символа ‘#’) текущего URL.
  • load — событие происходит, когда загрузка объекта завершена. Событие load наиболее часто используется для элемента body , чтобы выполнить сценарий сразу же после того как веб-страница полностью загрузится.
  • unload — событие происходит при выгрузке страницы (например, при закрытии вкладки (окна) браузера).
  • pageshow — событие происходит, когда пользователь переходит на веб-страницу, т.е. после того как страница становится доступна пользователю. Событие pageshow похоже на событие load , за исключением того, что оно срабатывает каждый раз при загрузке страницы, даже если она загружается из кэша. При первой загрузке страницы событие pageshow срабатывает сразу после события load .
  • pagehide — событие происходит, когда пользователь уходит со страницы (событие pagehide происходит до события unload ). Кроме этого данное событие, в отличие от события unload не препятствует кэшированию страницы.
  • resize — событие происходит при изменении размеров окна браузера.
  • scroll — событие происходит, когда вы прокручиваете содержимое элемента, имеющего полосу прокрутки.

События формы и элементов управления

  • focus — событие происходит, когда элемент получает фокус. Данное событие не всплывает.
  • blur — событие происходит, когда объект теряет фокус. Данное событие не всплывает.
  • focusin — событие происходит, когда элемент получает фокус. Событие focusin подобно событию focus , но отличается от него тем, что оно всплывает. Поэтому его можно использовать, когда Вам необходимо выяснить, кто теряет фокус: элемент или его ребёнок?
  • focusout — событие происходит, когда элемент собирается потерять фокус. Событие focusout подобно событию blur , но отличается от него тем, что оно всплывает. Поэтому его можно использовать, когда Вам необходимо выяснить, кто теряет фокус: элемент или его ребёнок?
  • change — событие происходит при изменении значения элемента, но уже после того как элемент потерял фокус. Кроме события change в JavaScript есть также похожее событие input , которое отличается от события change тем, что происходит сразу же после изменения значения элемента. Событие сhange в отличие от события input также работает с элементами keygen и select . Для радиокнопок ( radiobuttons ) и флажков ( checkboxes ) событие change происходит при изменении состояния этих элементов.
  • input — событие происходит после того как изменяется значение элемента input или элемента textarea .
  • invalid — событие происходит, когда элемент input , данные которого необходимо отправить вместе с другими данными формы на сервер, содержит недопустимые данные.
  • reset — событие происходит перед очисткой формы, которая осуществляется элементом input с type=»reset» .
  • search — событие возникает после того как пользователь нажимает на клавишу Enter или нажимает кнопку » x » (отмена) в элементе input с type=»search» .
  • select — событие происходит после того как Вы выбрали некоторый текст в элементе. Событие select в основном используется для элемента input с type=»text» или textarea .
  • submit — событие происходит перед отправкой формы на сервер.

События перетаскивания

События, связанные с перетаскиваемым объектом (draggable target, исходный объект):

  • dragstart – событие происходит, когда пользователь начал перетаскивать элемент;
  • drag – событие происходит, когда пользователь перетаскивает элемент;
  • dragend – событие происходит, когда пользователь закончил перетаскивания элемента, т.е. когда отпустил курсор мыши.

События, связанные с объектом (drop target), который принимает перетаскиваемый объект (draggable target):

  • dragenter – событие происходит, когда перетаскиваемый объект (draggable target) вошёл в область элемента (drop target), который может принять перетаскиваемый объект (draggable target).
  • ragleave – событие происходит, когда перетаскиваемый объект (draggable target) покидает пределы элемента (drop target), который может его принять.
  • dragover — событие происходит, когда перетаскиваемый объект (draggable target) перемещается в области элемента (drop target), который может его принять.
  • drop — событие происходит, когда пользователь отпускает перетаскиваемый объект (draggable target) в область элемента (drop target), который может его принять.

События буфера обмена

  • сopy — событие происходит, когда пользователь копирует содержимое элемента. Событие copy также происходит, когда пользователь копирует элемент (например, изображения, созданные с помощью элемента img ). Событие copy используется в основном для элементов input с type=»text» .
  • сut — событие происходит, когда пользователь вырезает содержимое элемента.
  • paste — событие происходит, когда пользователь вставляет некоторое содержимое в элемент.

События печати

  • afterprint — событие происходит, когда страница начинает печататься (т.е. после нажатия кнопки «Печать» в диалоговом окне) или если диалоговое окно «Печать» было закрыто.
  • beforeprint — событие возникает перед печатью страницы, т.е. до открытия диалогового окна «Печать».

События, посылаемые сервером

  • error — событие возникает при возникновении ошибки с источником события. Ошибка обычно возникает, когда связь нарушается. Если это произойдет, то объект EventSource будет автоматически пытаться подключиться к серверу.
  • open — событие возникает, когда соединение с источником события открыто.
  • message — событие возникает, когда сообщение получено через источник события.
    Объект event события message поддерживает следующие свойства:
    • data — содержит сообщение.
    • origin — URL документа, который вызвал событие.
    • lastEventId — идентификатор ( id ) последнего полученного сообщения.

    События мультимедиа

    В процессе загрузки аудио/видео события происходят в следующем порядке: loadstart -> durationchange -> loadedmetadata -> loadeddata -> progress -> canplay -> canplaythrough .

    Источник