Сколько есть возможных значений 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.

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

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

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

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

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

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. Предотвратите стандартное для браузера выделение текста при кликах.

    Зачем нужен метод preventDefault

    Возможно, вам уже когда-то встречалась в коде такая строка — evt.preventDefault() . Например, в тренажёрах по JavaScript. Давайте подробно разберём, зачем она нужна.

    При разработке таких типичных элементов интерфейса, как форма или попап, часто нужно изменить поведение браузера по умолчанию. Допустим, при клике по ссылке мы хотим, чтобы открывался попап, но вместо этого браузер будет автоматически переходить по адресу, указанному в атрибуте href . Или вот другая проблема — мы хотим перед отправкой формы проверять корректность введённых данных, но после нажатия на кнопку submit форма каждый раз будет отправляться на сервер, даже если там куча ошибок. Такое поведение браузера нам не подходит, поэтому мы научимся его переопределять.

    Объект события и метод preventDefault

    Событие — это какое-то действие, произошедшее на странице. Например, клик, нажатие кнопки, движение мыши, отправка формы и так далее. Когда срабатывает событие, браузер создаёт объект события Event. Этот объект содержит всю информацию о событии. У него есть свои свойства и методы, с помощью которых можно эту информацию получить и использовать. Один из методов как раз позволяет отменить действие браузера по умолчанию — preventDefault() .

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

    Пример: когда ссылка — не ссылка

    Ранее мы уже говорили о попапе, который должен появляться при клике на ссылку — давайте разберём этот кейс на практике. Так будет выглядеть разметка в упрощённом виде:

    Мы хотим при клике на ссылку click-button добавлять элементу с классом content класс show . Он сделает попап видимым, поменяв значение свойства display с none на block . Напишем логику добавления этого класса с помощью JavaScript:

    // Находим на странице кнопку и попап const button = document.querySelector('.click-button'); const popup = document.querySelector('.content'); // Навешиваем на кнопку обработчик клика button.onclick = function (evt) < // Отменяем переход по ссылке evt.preventDefault(); // Добавляем попапу класс show, делая его видимым popup.classList.add('show'); >;

    Если мы уберём строку evt.preventDefault() , вместо попапа откроется отдельная страница pop-up.html , адрес которой прописан в атрибуте href у ссылки. Такая страница нужна, потому что мы хотим, чтобы вся функциональность сайта была доступна, если скрипт по какой-то причине не будет загружен. Именно поэтому мы изначально реализовали кнопку с помощью тега a , а не button . Но у нас с JavaScript всё в порядке, поэтому вместо отдельной страницы мы открыли попап, отменив действие браузера по умолчанию.

    Пример: проверка формы перед отправкой

    Разберём следующий кейс — отправку формы при нажатии на кнопку submit . Допустим, мы хотим перед отправкой проверять введённые данные, потому что в поле ввода обязательно должно быть значение ‘Кекс’ и никакое другое. Разметка формы:

    При нажатии на кнопку «Готово» сработает событие отправки формы submit , и форма отправится вне зависимости от корректности введённого значения, поэтому мы должны перехватить отправку.

    // Находим на странице форму и инпут const form = document.querySelector('.form'); const name = document.querySelector('.name'); // Навешиваем на форму обработчик отправки form.onsubmit = function(evt) < // Проверяем введённое значение на соответствие if (name.value !== 'Кекс') < // Если значение не подходит, отменяем автоматическую отправку формы evt.preventDefault(); // И выводим предупреждение в консоль console.log('Вы не Кекс!'); >>;

    Здесь мы не дали отправить форму при неверно введённом значении. Но если всё в порядке, условие не выполнится, и форма будет отправлена как обычно.

    Неотменяемые события

    Не для всех событий можно отменить действие по умолчанию. Например, событие прокручивания страницы scroll проигнорирует попытки отменить его. Чтобы узнать, можно отменить действие по умолчанию или нет, нужно обратиться к свойству cancelable объекта Event . Оно будет равно true , если событие можно отменить, и false — в обратном случае.

    document.onscroll = function(evt) < // В консоль выведется false console.log(evt.cancelable); // Отмена не сработает evt.preventDefault(); >;

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

    Больше практики в JavaScript

    • Тернарный оператор в JavaScript
    • Живые и неживые коллекции в JavaScript
    • Как правильно называть переменные

    «Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

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

    Интерфейс 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 (для левой и средней кнопки мыши ): mousedown → mouseup → click.

    Поддерживаемые 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 (для правой кнопки мыши ): mousedown → mouseup → contextmenu.

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

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

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

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

    dblclick

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

    Поддерживаемые 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

    Похожие публикации:
    1. 360 zip что это за программа
    2. Как в ворде писать под строчкой маленькими буквами
    3. Как выровнять цифры в содержании в ворде
    4. Как вышить фотографию крестом программа

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

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