Не пропусти
Главная 16 Название категории 16 Мышь: клики, кнопка, координаты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Например, кнопка ниже сработает только на 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/clientY содержит координаты курсора относительно текущего окна.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В 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 тоже были довольны.

Эта задача состоит из трёх частей.

  1. Сделайте список, элементы которого можно выделять кликом.
  2. Добавьте мульти-выделение. Если клик с нажатым Ctrl ( Cmd под Mac), то элемент добавляется-удаляется из выделенных.
  3. Добавьте выделение промежутков. Если происходит клик с нажатым Shift , то к выделению добавляется промежуток элементов от предыдущего кликнутого до этого. При этом не важно, какое именно действие делал предыдущий клик. Это похоже на то, как работает файловый менеджер в ряде ОС, но чуть проще, так как конкретная реализация выделений различается у разных ОС, и её точное воспроизведение не входит в эту задачу.

О admin

x

Check Also

Ницца: жемчужина Лазурного берега

Ницца быстро стала одним из важнейших торговых городов и портов на побережье Лигурийского моря. В VII веке Ницца присоединилась к Генуэзской лиге, которая объединяла города Лигурийского побережья. В 729 году ...

Как дешево добраться до Праги?

Как можно недорого добраться до Праги из Москвы, Санкт-Петербурга и других городов России? Лететь прямым рейсом, с пересадкой или на лоукостерах? Мы изучили все способы и сами слетали в Прагу. ...

Архивы Киев — Хочу в отпуск Куда поехать Где отдыхать Курорты Путешествия Туризм Отели Авиабилеты

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

Как избежать распространенные туристические ловушки

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

Отдых на Халкидики Греция

Халкидики – это полуостров, расположенный на юго-восток от города Салоники и имеет форму трезубца. Полуостров Халкидики Карта С весны по осень — время сезонного отдыха в Халкидики. И сюда отправляются ...

Отдых в Египте с детьми — Все

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

Санаторий Мечта Анапа цены путевки 2018, Мечта в Анапе, Мечта Анапы, анапская Мечта, лечение в санатории Мечта

Санаторий «Мечта» расположен в начале Пионерского проспекта, на первой береговой линии, в 50 метрах пляжа. Широкий благоустроенный пляж санатория считается одним из лучших для отдыха в Анапе. На территории санатория ...

Самостоятельная поездка в Литву 2010

Всем,всем добрый день! Хочу поделиться впечатлениями от поездки в Литву.Здесь мы с мужем провели небольшие выходные ,всего- то три полных дня с 2-мя ночевками. Это была наша первая поездка в ...

Банки, кредиты и займы

Джал Махал — затопленный дворец Джайпура

Красивый дворец Джал-Малах погружен в воды искусственного озера в “розовом городе” Джайпур, что в индийском штате Раджастхан. Именно по этой причине его также называют “Водяным Дворцом”. О его истории известно ...

Аренда виллы в Ллорет де Мар

На сайте WorldHome вы можете снять дом в Ллорет де Мар для отдыха Испания. Забронировать необходимый объект, оплатить аренду вы можете онлайн, не выходя из дома. Воспользуйтесь нашим каталогом с ...

Пакетные предложения от гостиницы Бутик-отель Столица

Гостиница для командировки в Гатчину. проживание в номере любой категории 1500 р/сутки (+ 2 хразовое питание); возможно питание на выбор одно, двух, трехразовое; в пакет 1500 входит два приема пищи ...

Иран: Путешествие по древним столицам Персидский залив, Туристическая компания «Открытие»

Великолепная загадочная страна с богатой историей, малопосещаемая туристами, Иран — «белое пятно» на карте для большинства даже опытных путешественников. Такие города как Шираз и Исфахан известны нам по персидским сказкам. ...

Недвижимость в Торревьеха, Испания

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

Виды активного туризма на Алтае

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

Новый год 2018 в России: 6 лучших мест, куда поехать

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

Где живут и что едят миллионеры, отдыхая в Ницце?

Хочу в отпускГде отдохнуть Где живут и что едят миллионеры, отдыхая в Ницце? Миллионеры, у которых по каким-то причинам еще нет виллы в Ницце, останавливаются только в самом уважаемом и ...

Достопримечательности Новой Зеландии

Авиакомпании ежемесячно делают скидки на свои авиабилеты. Размеры скидок могут доходить до 50%. Будьте первыми среди тех кто узнает, о начале распродажи авиабилетов. Начните экономить на авиабилетах! Сэкономьте до 50%. ...

Путешествие в Екатеринбург — недорогие гостиницы, развлечения, экскурсии, туры

Среди множества моих московских коллег и близких друзей достаточно много людей предпочитают проводить свой отпуск за границей. Некоторые из них привыкают к одному месту, скажем, к Турции и отелю Клуб ...

Рейтинг@Mail.ru