Основи подій миші

У цьому розділі ми детальніше розглянемо події миші та його властивості.

Відразу зауважимо: ці події бувають не тільки через мишу, але й емулюються на інших пристроях, зокрема на мобільних, для сумісності.

Типи подій миші

Ми вже бачили деякі з цих подій:

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

Усі події миші мають координати двох видів:

1. Щодо вікна: clientX та clientY .
2. Щодо документа: pageX та pageY .

Ми вже розглянули різницю між ними на чолі Координати.

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

Наприклад, якщо у нас є вікно розміром 500x500, і курсор миші знаходиться у лівому верхньому кутку, то значення 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. Запобігайте стандартному браузеру для виділення тексту під час кліків.

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

  Матеріал на цій сторінці застарів, тому прихований із змісту сайту.

  Новіша інформація з цієї теми знаходиться на сторінці https://learn.javascript.ru/mouse-events-basics.

  У цьому розділі ми глибше розберемося зі списком подій миші, розглянемо їх загальні властивості, і навіть ті події, пов'язані з кліком.

  Типи подій миші

  Умовно можна розділити події на два типи: «прості» та «комплексні».

  Прості події

  mousedown Кнопка миші натиснуто над елементом. mouseup Кнопка миші відпущена над елементом. mouseover Миша з'явилася над елементом. mouseout Миша пішла з елемента. mousemove Кожен рух миші над елементом генерує цю подію.

  Комплексні події

  click Викликається при кліку мишею, тобто при mousedown , а потім mouseup на одному елементі contextmenu Викликається при кліку правою кнопкою миші на елементі. dblclick Викликається при подвійному натисканні елемента.

  Комплексні можна скласти з простих, тому теоретично можна було б обійтися взагалі без них. Але вони є, і це добре, бо з ними зручніше.

  Порядок спрацювання подій

  Одна дія може викликати кілька подій.

  Наприклад, клік викликає спочатку переміщеннявнизу при натисканні, а потім натиснувши і клацнувши при відпусканні кнопки.

  У випадках, коли одна дія генерує кілька подій, їх порядок фіксований. Тобто, обробники викликатимуться в порядку mousedown → mouseup → click .

  Клацніть на кнопці нижче і ви побачите, які при цьому відбуваються події. Спробуйте також подвійний клік.

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

  Кожна подія опрацьовується незалежно.

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

  Отримання інформації про кнопку: which

  При обробці подій, пов'язаних з кліками миші, важливо знати, яка кнопка натиснута.

  Для отримання кнопки миші в об'єкті event є властивість яких.

  Насправді воно використовується рідко, т.к. Зазвичай обробник вішається або накнопці - тільки на ліву кнопку миші, або наконтекстмену - тільки на праву.

  Можливі такі значення:

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

  Ця властивість не підтримується IE8, але його можна отримати способом, описаним в кінці розділу.

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

  Ця подія спрацьовує при натисканні правою кнопкою миші:

  Правий клік на цій кнопці виведе "Клік".
  Правий клік сюди

  При натисканні на кнопку вище після обробника oncontextmenu буде показано звичайне контекстне меню, яке браузер завжди показує при натисканні правою кнопкою. Це його дією за умовчанням.

  Якщо ми не хочемо, щоб показувалося вбудоване меню, наприклад тому що показуємо своє, специфічне для нашої програми, можна скасувати дію за замовчуванням.

  У прикладі нижче вбудоване меню не показано:

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

  У всіх подіях миші є інформація про натиснені клавіші-модифікатори.

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

  Наприклад, кнопка нижче спрацює лише на Alt+Shift+Клік:

  Alt+Shift+Клікні мене! document.body.children[0].onclick = function(e)
  

  На комп'ютерах під керуванням 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 містить координати курсору щодо поточного вікна.

  При цьому, наприклад, якщо ваше вікно розміром 500x500, а миша знаходиться в центрі, тоді і 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-й біт встановлено), якщо натиснуто середню кнопку.

  Що цікаво, при цьому ми можемо дізнатися, чи були дві кнопки натиснуті одночасно, в той час як стандартний, яких такої можливості не дає. Тож, у певному сенсі, властивість button – потужніша.

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

  function fixWhich(e) < if (!e.which && e.button) < // якщо which немає, але є button. (IE8-) if (e.button & 1) e.which = 1; // Ліва кнопка else if (e.button & 4) e.which = 2; // Середня кнопка else if (e.button & 2) e.which = 3; // права кнопка >>

  Властивості pageX/pageY

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

  Докладніше про її обчислення ви можете прочитати у розділі прокручування сторінки.

  Ми ж тут наведемо готовий варіант, який дозволяє нам отримати pageX/pageY для старих і зовсім старих IE:

  function fixPageXY(e) < if (e.pageX == null && e.clientX != null) < // якщо немає pageX..var html = document.documentElement; var body = document.body; e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0); e.pageX -= html.clientLeft || 0; e.pageY = e.clientY + (html.scrollTop | | body & & body.scrollTop | | 0); e.pageY -= html.clientTop || 0; >>

  Разом

  Події миші мають такі властивості:

  • Кнопка миші: 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 і перемістити в нього текстовий вузол-заголовок.

  Після цього перевірити, чи потрапив клік у нього і повернути все, як було.

  // 1) загортаємо текстовий вузол у SPAN // 2) перевіряємо var elem = document.elementFromPoint(e.clientX, e.clientY); var isClickOnTitle = (elem == span); // 3) повертаємо текстовий вузол назад із SPAN

  На кроці 3 текстовий вузол виймається з SPAN , все повертається у вихідний стан.

  Як визначити кнопку миші - докладний посібник з прикладами та поясненнями

  У наш час миші широко використовуються для взаємодії з комп'ютером, і часто виникає потреба дізнатися, яку кнопку ви щойно натиснули. Можливо, вам потрібно знати, яка кнопка натиснута для визначення правильних дій у програмі чи грі. У цій статті ми розглянемо кілька способів дізнатись, яка кнопка миші натиснута.

  Перший спосіб – це використання JavaScript. За допомогою JavaScript можна легко визначити, яка кнопка миші була натиснута в момент події. Для цього вам знадобиться трохи коду. Просто додайте обробник подій для миші і всередині нього виведіть інформацію про кнопку. Наприклад, ви можете використовувати наступний код:

  document.addEventListener('mousedown', function(event) else if (event.button == 1) else if (event.button == 2) >);

  Або ви можете використовувати jQuery, щоб зробити це ще простіше і коротко. Ось приклад коду з використанням jQuery:

  $(document).mousedown(function(event) else if (event.which == 2) else if (event.which == 3) >);

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

  Третій спосіб - це використання фізичних індикаторів на самій миші. Деякі миші мають спеціальні кнопки або світлодіоди, які показують, яку кнопку ви щойно натиснули. Зверніться до інструкції до миші, щоб дізнатися більше про такі функції.

  Тепер, коли ви знаєте кілька способів, щоб дізнатися, яка кнопка миші натиснута, ви можете використовувати їх у відповідних ситуаціях. Незалежно від того, що вам потрібно зробити, ви завжди знатимете, яка кнопка була натиснута і приймати відповідні рішення.

  Як дізнатись, яка кнопка миші?

  Щоб дізнатися, яка кнопка миші натиснута, можна використовувати подію JavaScript MouseEvent.button . Ця властивість повертає число, яке є кодом кнопки миші.

  Існують такі значення для властивості MouseEvent.button:

  Код кнопки	Кнопка миші
  0	Ліва кнопка миші
  1	Колесо чи середня кнопка миші
  2	Права кнопка миші

  Щоб перевірити, яка кнопка миші натиснута, можна використовувати умовні оператори та перевірити значення властивості MouseEvent.button . Наприклад, наступний код дозволяє визначити, чи натиснута права кнопка миші:

  if (event.button === 2) console.log("Права кнопка миші натиснута");
  > else console.log("Права кнопка миші не натиснута");
  >

  Так само можна перевірити натискання лівої або середньої кнопки миші, замінивши значення в умовній перевірці на 0 або 1 відповідно.

  Чому варто знати кнопку миші?

  Знання про те, як працює кнопка миші, може бути корисним і навіть необхідним у багатьох ситуаціях. Ось кілька причин, чому варто дізнатися, як використовувати цю функцію:

  • Поліпшення ергономіки роботи: знаючи, яка кнопка миші виконує якусь функцію, можна оптимізувати свою роботу і зробити її більш ефективною. Наприклад, можна налаштувати додаткові кнопки миші для виконання команд або функцій, що часто використовуються, що дозволить вам заощадити час і зменшити навантаження на руки.
  • Зручність в іграх: багато комп'ютерних ігор використовують різні кнопки миші для різних дій. Знаючи, яка кнопка потрібна для стрільби, стрибка або взаємодії з об'єктами, ви зможете успішніше грати і насолоджуватися процесом.
  • Підвищення продуктивності в роботі з програмами та програмами: знання, яка кнопка миші потрібна для копіювання, вставки, відкриття контекстного меню або виконання інших дій, дозволить вам швидше та легше працювати з програмами та додатками.
  • Розвиток навичок роботи з комп'ютером: знання функціональності миші є невід'ємною частиною комп'ютерної грамотності. Чим більше знаєте про роботу комп'ютера та його пристрої, тим більш звичними стають дії для вас, що може значно оптимізувати вашу роботу та підвищити продуктивність.

  Функції кнопок миші

  Кнопки миші мають різні функції, які можуть бути корисними під час роботи на комп'ютері. Ось деякі з них:

  1. Ліва кнопка миші: найголовніша кнопка, яка зазвичай використовується для виділення тексту, запуску програм та вибору елементів на екрані.
  2. Права кнопка миші: ця кнопка зазвичай відкриває контекстне меню з варіантами дій, пов'язаних із виділеним елементом або місцем на екрані.
  3. Колесо прокручування: часто використовується для прокручування веб-сторінок, документів та інших довгих списків. Може бути призначено інші функції, наприклад, для масштабування зображень або зміни гучності.
  4. Кнопка повернення (Back): дозволяє переходити на попередню сторінку браузера.
  5. Кнопка вперед (Forward): дозволяє переходити на наступну сторінку веб-браузера, якщо ви раніше повернулися на попередню сторінку.
  6. Бічні кнопки: деякі миші мають додаткові бічні кнопки, які можна налаштувати для виконання певних дій, наприклад, для швидкого перемикання між вкладками в браузері.

  Знаючи функції різних кнопок миші, можна спростити і прискорити свою роботу на комп'ютері.

  Перевірити кнопку миші: інструкція

  1. Використання JavaScript

  Одним із способів дізнатися, яка кнопка миші натиснута, є використання JavaScript. Для цього необхідно використати подію "click", яка виникає при натисканні на кнопку миші. В обробнику цієї події можна дізнатися яка саме кнопка миші була натиснута, а також виконати відповідні дії.

  document.addEventListener("click", function(event) else if(event.button === 1) else if(event.button === 2) >);

  2. Використання спеціалізованих програм

  Якщо ви не бажаєте писати код, існують спеціалізовані програми, які можуть допомогти вам перевірити кнопку миші.Деякі з них надають докладну інформацію про кожну кнопку миші, а також дозволяють налаштовувати її функціонал.

  • X-Mouse Button Control – програма для налаштування кнопок миші;
  • Logitech Gaming Software – програма для налаштування ігрових мишей Logitech;
  • Razer Synapse – програма для налаштування ігрових мишей Razer.

  3. Використання вбудованої функціональності операційної системи

  Деякі операційні системи надають вбудовану функціональність для перевірки кнопки миші. Наприклад, у Windows ви можете відкрити панель керування та перейти до розділу "Миша", щоб дізнатися інформацію про ваші кнопки миші та налаштувати їх функціонал.

  Всі ці способи допоможуть вам дізнатися, яка кнопка миші натиснута та налаштувати її функціонал під ваші потреби.

  Додаткові посібники щодо визначення кнопки миші

  У попередньому розділі ми розглянули основний посібник з визначення кнопки миші у різних браузерах.

  Нижче наведено кілька додаткових посібників, які можуть бути корисними для визначення кнопки миші на вашому веб-сайті:

  1. Використання події "click" : Один з найпростіших способів визначити кнопку миші - це використовувати подію click . , а після натискання середньої кнопки - значення 1.
  2. Використання події "mousedown" та "mouseup": Для більш точного визначення кнопки миші можна використовувати події mousedown та mouseup. При виникненні події mousedown можна перевірити властивість event.button для визначення натиснутої кнопки, а при виникненні події mouseup - для визначення відпущеної кнопки.
  3. Використання події "contextmenu" : Подія contextmenu виникає при натисканні правої кнопки миші, що дозволяє визначити натискання цієї кнопки. При виникненні події contextmenu можна скасувати стандартне контекстне меню (за допомогою методу event.preventDefault() ) та виконати свої дії.

  Це лише деякі з можливих способів визначення кнопки миші. Залежно від ваших потреб і цілей, ви можете вибрати найбільш вдалий спосіб.

  Поради щодо впізнавання кнопки миші

  Якщо ви хочете дізнатися, яка кнопка миші була натиснута користувачем, ось кілька корисних порад:

  1. Використовуйте події миші

  Для визначення кнопки миші можна використати події миші, такі як mousedown, mouseup і click. В об'єкті події міститься інформація про натиснуту кнопку миші.

  2. Перевірте якість button

  В об'єкті події миші є властивість button, що вказує, яка кнопка миші була натиснута. Наприклад, значення 0 відповідає лівій кнопці миші, значення 1 – середньої, а значення 2 – правій кнопці миші.

  3. Зверніть увагу на властивість buttons

  Якщо вас цікавить, які кнопки миші були натиснуті одночасно, перевірте властивість buttons об'єкт події миші. Воно містить набір прапорів кожної кнопки миші.

  4. Підтримуйте різні браузери

  Врахуйте, що різні браузери можуть надавати різні значення властивостей button і buttons. Тому рекомендується перевіряти підтримку та використовувати різні методи визначення кнопки миші залежно від браузера.

  5. Тестуйте свій код

  Не забудьте протестувати код на різних пристроях і в різних браузерах, щоб переконатися, що він працює належним чином.

  Дотримуючись цих порад, ви зможете успішно визначити кнопку миші та використовувати цю інформацію у своєму коді.