Сколько есть возможных значений event button
Перейти к содержимому

Сколько есть возможных значений event button

  • автор:

MouseEvent.buttons

Свойство MouseEvent.buttons доступно только для чтения. Оно показывает, какие клавиши мыши (или другого устройства ввода) были нажаты при срабатывании события.Для каждой нажатой кнопки есть своё уникальное битовое значение (см. ниже раздел «Возвращаемые значения»). Если нажаты несколько кнопок одновременно, значения суммируются, создавая новое значение. Например, если нажата вторая кнопка (2 или 000010 в двоичном коде) вместе со средней (4 или 000100 в двоичном коде), значение будет равно 6 (2 + 4) или 000110 в двоичном коде.

Примечание: Не путайте это свойство со свойством MouseEvent.button . Текущее свойство MouseEvent.buttons показывает состояние нажатых кнопок при любом событии мыши, а свойство MouseEvent.button указывает на события, произошедшие в результате нажатия/отпускания кнопок мыши.

Синтаксис

var buttonPressed = instanceOfMouseEvent.buttons

Возвращаемые значения

Целое число, представляющее одну или несколько кнопок. При одновременном нажатии нескольких кнопок значения объединяются (например, 3 = первая (1) + вторая (2) кнопки мыши):

  • 0 : кнопки не нажаты или не инициализированы;
  • 1 : первая кнопка (обычно левая);
  • 2 : вторая кнопка (обычно правая);
  • 4 : дополнительная кнопка (обычно средняя или колёсико мыши);
  • 8 : четвёртая кнопка (как правило, кнопка «Назад» браузера);
  • 16 : пятая кнопка (как правило, кнопка «Вперёд» браузера).

Спецификации

Specification
UI Events
# dom-mouseevent-buttons

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MouseEvent.button

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

Это свойство предоставляет информацию только о том, какая кнопка или несколько кнопок были нажаты или отпущены для инициации события, и не имеет отношения к таким событиям как mouseenter (en-US) , mouseleave (en-US) , mouseover (en-US) , mouseout (en-US) или mousemove (en-US) .

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

Примечание: Не путайте это свойство со свойством MouseEvent.buttons , которое содержит значения, соответствующие нажатым кнопкам мыши для всех типов событий мыши.

Синтаксис

var buttonPressed = instanceOfMouseEvent.button

Возвращаемые значения

Число, соответствующее нажатой кнопке:

  • 0 : Нажата основная кнопка. Левая кнопка мыши или переназначенная пользователем другая кнопка
  • 1 : Нажата вспомогательная кнопка. Колёсико или средняя кнопка мыши, если она есть
  • 2 : Нажата вторичная кнопка. Правая кнопка мыши
  • 3 : Нажата четвёртая кнопка мыши. Обычно кнопка браузера Назад
  • 4 : Нажата пятая кнопка мыши. Обычно кнопка браузера Вперёд

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

Пример

script> var whichButton = function (e)  // Handle different event models var e = e || window.event; var btnCode; if ('object' === typeof e)  btnCode = e.button; switch (btnCode)  case 0: console.log('Нажата левая кнопка.'); break; case 1: console.log('Нажата средняя кнопка или колёсико.'); break; case 2: console.log('Нажата правая кнопка.'); break; default: console.log('Неопределённое событие: ' + btnCode); > > > /script> button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();">Нажмите кнопку мыши. /button> 

Спецификации

Specification
UI Events
# dom-mouseevent-button

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

События «мыши»

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

click Высокоуровневое событие происходит, когда пользователь кликнул мышью на элементе. contextmenu Отменяемое событие происходит, когда пользователь кликнул правой кнопкой мышью на элементе. dblclick Событие происходит, когда пользователь выполнил двойной клик на элементе. mousedown Событие происходит, когда кнопка мыши нажата над некоторым элементом, но ещё не отпущена. mouseup Событие происходит, когда кнопка мыши над некоторым элементом перешла из состояния нажатия, в состояние отпущена. mouseover Событие происходит, когда курсор мыши входит в область, принадлежащей элементу или одному из его детей. mouseout Событие происходит, когда курсор мыши уходит из области, принадлежащей элементу или одному из его детей. mouseenter Событие возникает, когда указатель мыши входит в область, принадлежащую элементу. Это событие часто используется вместе с событием mouseleave, которое происходит, когда указатель мыши уходит из области, принадлежащей элементу. Событие mouseenter подобно событию mouseover и отличается от него только тем, что событие mouseenter не всплывает. Впервые появилось в IE и было стандартизовано в HTML5, но пока поддерживается не всеми браузерами. mouseleave Событие происходит, когда указатель мыши уходит из области, принадлежащей элементу. Событие mouseleave подобно событию mouseout и отличается от него только тем, что событие mouseleave не всплывает. Впервые появилось в IE и было стандартизовано в HTML5, но пока поддерживается не всеми браузерами. mousemove Событие происходит, когда курсор мыши перемещается внутри области, принадлежащей элементу. wheel Событие происходит при движении колёсика мыши .

Свойства объекта MouseEvent
altKey Возвращает true , если нажата клавиша ALT.
ctrlKey Возвращает true , если нажата клавиша CTRL.
shiftKey Возвращает true , если нажата клавиша SHIFT.
metaKey Возвращает true , если нажата клавиша META.
button Возвращает номер нажатой клавиши мыши .
which Возвращает номер нажатой клавиши мыши (1,2,3).
detail Возвращает количество кликов по объекту.
clientX Возвращает координату указателя мыши по оси X относительно окна.
clientY Возвращает координату указателя мыши по оси Y относительно окна.
pageX Возвращает координату указателя мыши по оси X относительно всего документа.
pageY Возвращает координату указателя мыши по оси Y относительно всего документа.
screenX Возвращает координату указателя мыши по оси X относительно экрана.
screenY Возвращает координату указателя мыши по оси Y относительно экрана.
relatedTarget Возвращает элемент, который связан с элементом, сгенерировавшим события мыши .

click

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

Поддерживаемые HTML-теги
Пример

Нажмите здесь, чтобы изменить цвет текста

document.getElementById("but").onclick = fdate; function fdate() < document.getElementById('demo').innerHTML=Date(); >function fun(obj,color)

click()

Метод click() имитирует щелчок мыши на элементе.

Синтаксис
element.click()
Пример

Справка

function f()

contextmenu

Отменяемое событие contextmenu происходит, когда пользователь кликнул правой кнопкой мыши на элементе. Порядок возникновения событий, связанных с contextmenu (для правой кнопки мыши ): mousedownmouseupcontextmenu.

Поддерживаемые HTML-теги
Пример

Правый клик на кнопке изменит цвет текущего текста.

Правый клик на кнопке изменит цвет текущего текста.

Правый клик сюда
Правый клик сюда без показа встроенного меню

dblclick

Событие dblclick происходит, когда пользователь выполнил двойной клик на элементе. Порядок возникновения событий, связанных с dblclick: mousedownmouseupclickmousedownmouseupclickdblclick.

Поддерживаемые HTML-теги
Пример

 

Дважды щелкните меня.

Дважды щелкните меня.

mousedown

Событие mousedown происходит, когда кнопка мыши нажата над некоторым элементом, но ещё не отпущена.

Поддерживаемые HTML-теги
Пример

 

Нажмите на этот текст! Функция mouseDown () запускается, когда кнопка мыши нажата над этим абзацем и устанавливает цвет текста в красный. Функция mouseUp () запускается при отпускании кнопки мыши и устанавливает цвет текста в зеленый.

function mouseDown() < document.getElementById("myP").style.color = "red"; >function mouseUp()

mouseup

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

Поддерживаемые HTML-теги
Пример
Нажмите здесь.
var d = document.getElementById("demo"); d.onmousedown = function() ; d.onmouseup = function() ; function mouseDown() function mouseUp()

mouseover

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

Поддерживаемые HTML-теги
Пример

 

Попробуй

mouseout

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

Поддерживаемые HTML-теги
Пример

Функция bigImg () запускается, когда пользователь перемещает указатель мыши на изображение.

Функция normalImg () запускается, когда указатель мыши покидает изображение.

function bigImg(x) < x.style.height = "96px"; x.style.width = "96px"; >function normalImg(x)

mousemove

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

Поддерживаемые HTML-теги
Пример

Наведите указатель мыши на прямоугольник и получите координаты указателя мыши.

function myFunction(event)

События mouseenter и mouseleave

События mouseenter/mouseleave похожи на mouseover / mouseout . Они тоже срабатывают, когда курсор заходит на элемент и уходит с него, но с двумя отличиями.

Эти события более интуитивно понятны.

Курсор заходит на элемент – срабатывает mouseenter, а затем – неважно, куда он внутри него переходит, mouseleave будет, когда курсор окажется за пределами элемента.

Вы можете увидеть, как они работают проведя курсором над голубым DIV’ом ниже. Обработчик стоит только на внешнем, синем элементе. Обратите внимание – лишних событий при переходе на красного потомка нет!

Для mouseover/mouseout при переходе на потомка срабатывает mouseout на родителе.

 .blue, p span < display: inline-block; width: 180px; margin-right: 80px; >.blue < background: blue; height: 180px; >.red < background: red; width: 120px; height: 120px; margin: 30px; >textarea < height: 150px; width: 480px; display: block; >textarea i.blue textarea i.red 

mouseenter и mouseleavemouseover и mouseout

function log(event)
Поддерживаемые HTML-теги
Совместимость с браузерами
30,0 5,5 Да 6,1 11,5

Колёсико «мыши»: «wheel»

Отличия колёсика от прокрутки

Несмотря на то, что колёсико мыши обычно ассоциируется с прокруткой, это совсем разные вещи.

  • При прокрутке срабатывает событие onscroll — рассмотрим его в дальнейшем. Оно произойдёт при любой прокрутке, в том числе через клавиатурy, но только на прокручиваемых элементах. Например, элемент с overflow: hidden в принципе не может сгенерировать onscroll .
  • А событие wheel является чисто «мышиным». Оно генерируется над любым элементом при передвижении колеса мыши . При этом не важно, прокручиваемый он или нет. В частности, overflow:hidden никак не препятствует обработке колеса мыши.

Кроме того, событие onscroll происходит после прокрутки, а onwheel — до прокрутки, поэтому в нём можно отменить саму прокрутку (действие браузера).

Зоопарк wheel в разных браузерах

Самые важные свойства современного события и его нестандартных аналогов:

wheel Свойство deltaY — количество прокрученных пикселей по горизонтали и вертикали. Существуют также свойства deltaX и deltaZ для других направлений прокрутки. MozMousePixelScroll Срабатывает, начиная с Firefox 3.5, только в Firefox. Даёт возможность отменить прокрутку и получить размер в пикселях через свойство detail , ось прокрутки в свойстве axis . DOMMouseScroll Существует в Firefox очень давно, отличается от предыдущего тем, что даёт в detail количество строк. Если не нужна поддержка Firefox < 3.5, то не нужно и это событие. mousewheel Срабатывает в браузерах, которые ещё не реализовали wheel. В свойстве wheelDelta — условный «размер прокрутки», обычно равен 120 для прокрутки вверх и -120 — вниз. Он не соответствует какому-либо конкретному количеству пикселей.

Чтобы кросс-браузерно отловить прокрутку и, при необходимости, отменить её, можно использовать все эти события.

Пример, включающий поддержку IE8-:
 #container 

Прокрутка: 0

Прокрути надо мной.

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

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

Синтаксис
event.altKey event.ctrlKey event.metaKey // для Mac event.shiftKey
Возвращаемое значение

Свойство возвращает true , если нажата соответствующая клавиша, и false — в противном случае

Комментарии

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

В JS-коде это означает, что для удобства пользователей Mac нужно проверять

if (event.ctrlKey || event.metaKey)
Пример
  document.getElementById('ekey').onclick = function(event)

Alt+Shift+Кликни меня!

button

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

Синтаксис
event.button
Возвращаемое значение

Число, представляющее какая кнопка мыши была нажата, когда произошло событие event .

  • -1 — никакая кнопка не нажата.
  • 0 — нажата основная кнопка (обычно это левая кнопка).
  • 1 — нажата средняя кнопка (обычно это колёсико).
  • 2 — нажата вторая кнопка (обычно это правая кнопка).
  • 3 — нажата четвёртая кнопка (обычно это кнопка Назад ).
  • 4 — нажата пятая кнопка (обычно это кнопка Вперёд ).
  • 1: нажата левая кнопка;
  • 4: нажата средняя кнопка;
  • 2: нажата правая кнопка.

which

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

Синтаксис
event.which
Возвращаемое значение

Число, представляющее какая кнопка мыши была нажата, когда произошло событие event .

  • 1: нажата левая кнопка;
  • 2: нажата средняя кнопка;
  • 3: нажата правая кнопка.
Комментарии

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

function fixWhich(event) < if (!event.which && event.button) < // если which нет, но есть button. (IE8-) if (event.button & 1) event.which = 1; // левая кнопка else if (event.button & 4) event.which = 2; // средняя кнопка else if (event.button & 2) event.which = 3; // правая кнопка >>

detail

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

Синтаксис
event.detail
Возвращаемое значение

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

Примечание: Возвращаемое значение для события ondblclick всегда «2», а для OnMouseOver или onmouseout — всегда «0»

Совместимость с браузерами
Да 9,0 Да Да Да
Пример
  function f(event)

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

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

Синтаксис
event.clientX event.clientY
Возвращаемое значение

Свойство clientX возвращает горизонтальную координату указателя мыши относительно текущего окна.

Свойство clientY возвращает вертикальную координату указателя мыши относительно текущего окна.

Пример

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

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

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

Синтаксис
event.pageX event.pageY
Возвращаемое значение

Свойство clientX возвращает горизонтальную координату указателя мыши относительно документа.

Свойство clientY возвращает вертикальную координату указателя мыши относительно документа.

Комментарии

В IE8- этих свойств нет, но можно получить их следующим способом:

function fixPageXY(event) < if (event.pageX == null && event.clientX != null) < // если нет pageX.. var html = document.documentElement; var body = document.body; event.pageX = event.clientX + (html.scrollLeft || body && body.scrollLeft || 0); event.pageX -= html.clientLeft || 0; event.pageY = event.clientY + (html.scrollTop || body && body.scrollTop || 0); event.pageY -= html.clientTop || 0; >>
Пример

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

Координаты относительно экрана: screenX/Y

Пара свойств screenX/screenY содержит координаты курсора относительно экрана.

Синтаксис
event.screenX event.screenY
Возвращаемое значение

Свойство screenX возвращает горизонтальную координату указателя мыши относительно экрана.

Свойство screenY возвращает вертикальную координату указателя мыши относительно экрана.

Пример

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

relatedTarget

Свойство relatedTarget возвращает ссылку на элемент, который связан с элементом, сгенерировавшим события мыши

Синтаксис
event.relatedTarget
Возвращаемое значение

Ссылка на соответствующий элемент.

Описание

Свойство объекта события relatedTarget позволяет узнать, с какого элемента пришла (или на какой ушла) мышь .

  • event.target – элемент, на который пришла мышь , то есть на котором возникло событие.
  • event.relatedTarget – элемент, с которого пришла мышь .
  • event.target – элемент, с которого ушла мышь , то есть на котором возникло событие.
  • event.relatedTarget – элемент, на который перешла мышь .

Свойство relatedTarget может быть равно null .
Это вполне нормально и означает, что мышь пришла не с другого элемента, а из-за пределов окна (или ушла за окно). Обязательно необходимо иметь в виду такую возможность, когда пишется код, который обращается к свойствам relatedTarget.

В IE8- нет свойства relatedTarget. Вместо него используется fromElement для mouseover и toElement для mouseout .
Можно «исправить» несовместимость с relatedTarget так:

function fixRelatedTarget(event) < if (event.relatedTarget === undefined) < if (event.type == 'mouseover') event.relatedTarget = event.fromElement; if (event.type == 'mouseout') event.relatedTarget = event.toElement; >>
Пример
 [class^="e-"] < display: inline-block; width: 70px; height: 70px; border-radius: 50%; margin-right: 10px; >.e-green < background: #a9db7a; border: 5px solid #92c563;>.e-yellow < background: #eed16a; border: 5px solid #dbae51;>.e-red < background: #ee9295; border: 5px solid #e27378;>#log   

Drag & Drop

В качестве обобщённого примера рассмотрим Drag & Drop — это возможность захватить мышью элемент и перенести его.

В современном стандарте HTML5 есть поддержка Drag’n’Drop при помощи специальных событий.

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

Но в плане именно Drag’n’Drop у них есть существенные ограничения. Например, нельзя организовать перенос «только по горизонтали» или «только по вертикали». Также нельзя ограничить перенос внутри заданной зоны. Есть и другие интерфейсные задачи, которые такими встроенными событиями нереализуемы.

Поэтому здесь мы будем рассматривать Drag’n’Drop при помощи событий мыши.

Алгоритм Drag & Drop
  1. Отслеживаем нажатие кнопки мыши на переносимом элементе при помощи события mousedown .
  2. При нажатии – подготовить элемент к перемещению. При этом не забыть отключить браузерный Drag’n’Drop, который автоматически запускается и вступает в конфликт с нашим.

element.ondragstart = function()

В следующем примере эти шаги реализованы для переноса мяча:

Кликните по мячу и тяните, чтобы двигать его.

Более подробно о Drag & Drop с большм количеством примеров можно узнать на javascript.ru

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

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

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

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

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

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 являются:

Состояние кнопки event.button
Левая кнопка (основная) 0
Средняя кнопка (вспомогательная) 1
Правая кнопка (вторичная) 2
Кнопка X1 (назад) 3
Кнопка X2 (вперёд) 4

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

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

Устаревшее свойство event.which

В старом коде вы можете встретить 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 +клик:

 

Внимание: обычно на Mac используется клавиша Cmd вместо Ctrl

В 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 .

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

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

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

    Задачи

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

    важность: 5

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *