Double click mouse javascript

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

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

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

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

Мы уже видели некоторые из этих событий:

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

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

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

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

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

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

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

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

Кроме того, мы можем видеть свойство button , которое позволяет нам определять кнопку мыши; это объясняется ниже.

Кнопки мыши

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

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

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

Возможными значениями event.button являются:

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

Также есть свойство event.buttons , в котором все нажатые в данный момент кнопки представлены в виде целого числа, по одному биту на кнопку. На практике это свойство используется очень редко, вы можете найти подробную информацию по адресу MDN, если вам это когда-нибудь понадобится.

В старом коде вы можете встретить event.which свойство – это старый нестандартный способ получения кнопки с возможными значениями:

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

На данный момент event.which устарел, нам не следует его использовать.

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

Модификаторы: 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

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

Мы уже рассмотрели разницу между ними в главе Координаты.

Если в кратце, то относительные координаты документа pageX/Y отсчитываются от левого верхнего угла документа и не меняются при прокрутке страницы, в то время как clientX/Y отсчитываются от левого верхнего угла текущего окна. Когда страница прокручивается, они меняются.

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

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

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

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

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

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

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

Сделайте двойной клик на мне

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

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

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

До. Сделайте двойной клик на мне . После

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

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

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

 
Уважаемый пользователь, Копирование информации запрещено для вас. Если вы знаете JS или HTML, вы можете найти всю нужную вам информацию в исходном коде страницы.
 

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

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

Итого

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

• Кнопка: button .
• Клавиши-модификаторы ( true если нажаты): altKey , ctrlKey , shiftKey и metaKey (Mac).
  • Если вы планируете обработать Ctrl , то не забудьте, что пользователи Mac обычно используют Cmd , поэтому лучше проверить if (e.metaKey || e.ctrlKey) .

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

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

  Задачи

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

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

  • При клике на элемент списка выделяется только этот элемент (добавляется класс .selected ), отменяется выделение остальных элементов.
  • Если клик сделан вместе с Ctrl ( Cmd для Mac), то выделение переключается на элементе, но остальные элементы при этом не изменяются.

  P.S. В этом задании все элементы списка содержат только текст. Без вложенных тегов.

  P.P.S. Предотвратите стандартное для браузера выделение текста при кликах.

  Источник

  dblclick

  Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

  Кратко

  Скопировать ссылку «Кратко» Скопировано

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

  Как пишется

  Скопировать ссылку «Как пишется» Скопировано

  На событие dblclick можно подписаться и информировать пользователя, например:

   document.addEventListener('dblclick', event =>  alert('На странице зафиксирован двойной клик!')>) document.addEventListener('dblclick', event =>  alert('На странице зафиксирован двойной клик!') >)    Скопировать Скопировано Не удалось скопировать   

  Также можно отслеживать двойные клики по любым элементам на странице:

   const card = document.querySelector('.card') // установим обработчик на событие двойного кликаcard.addEventListener('dblclick', function ()  alert('Вы дважды кликнули по карточке!')>) const card = document.querySelector('.card') // установим обработчик на событие двойного клика card.addEventListener('dblclick', function ()  alert('Вы дважды кликнули по карточке!') >)    Скопировать Скопировано Не удалось скопировать   

  В функцию-обработчик можно передать объект события, который содержит поля с информацией о клике, например:

  Чтобы получить доступ к объекту события, функция-обработчик должна принимать его в качестве параметра:

   card.addEventListener('dblclick', function (event)  alert(event.target.classList) // отображает название класса элемента, по которому дважды кликнули>) card.addEventListener('dblclick', function (event)  alert(event.target.classList) // отображает название класса элемента, по которому дважды кликнули >)    Скопировать Скопировано Не удалось скопировать   

  В примере ниже двойной клик по карточке меняет её размер:

   const card = document.querySelector('.card') card.addEventListener('dblclick', function ()  card.classList.toggle('card_enlarged') // модификатор увеличивает размер карточки>) const card = document.querySelector('.card') card.addEventListener('dblclick', function ()  card.classList.toggle('card_enlarged') // модификатор увеличивает размер карточки >)    Скопировать Скопировано Не удалось скопировать   

  Источник

  Double click mouse javascript

  Learn Latest Tutorials

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  Preparation

  

  

  

  

  Trending Technologies

  

  

  

  

  

  

  

  

  

  

  

  

  B.Tech / MCA

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  Javatpoint Services

  JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.

  • Website Designing
  • Website Development
  • Java Development
  • PHP Development
  • WordPress
  • Graphic Designing
  • Logo
  • Digital Marketing
  • On Page and Off Page SEO
  • PPC
  • Content Development
  • Corporate Training
  • Classroom and Online Training
  • Data Entry

  Training For College Campus

  JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
  Duration: 1 week to 2 week

  Like/Subscribe us for latest updates or newsletter

  Источник

  Читайте также:  Си шарп ref out