JS властивість Event.which (Mouse)
Загальний опис
which — це властивість об'єкта події MouseEvent, яка повертає значення, що відповідає кнопці миші, натиснутій під час події. Вона використовується для виявлення того, яка кнопка була натиснута: ліва, права або середня. Ця властивість повертає числове значення: 1 для лівої кнопки, 2 для середньої, 3 для правої.
Раніше властивість which була популярною для обробки подій миші, однак сьогодні рекомендується використовувати більш сучасну властивість button. Однак which все ще використовується для сумісності з застарілими браузерами або специфічними випадками, коли підтримка старих браузерів є критичною.
Коли користувач натискає на елемент за допомогою миші, подія миші може бути перехоплена за допомогою слухача подій, наприклад, для подій mousedown, mouseup або click. У таких подіях ви можете отримати доступ до властивості which, щоб визначити, яка саме кнопка миші була використана. Ось простий приклад:
document.addEventListener('mousedown', function(event) {
if (event.which === 1) {
console.log('Натиснута ліва кнопка миші.');
} else if (event.which === 2) {
console.log('Натиснута середня кнопка миші.');
} else if (event.which === 3) {
console.log('Натиснута права кнопка миші.');
}
});
Як видно з прикладу, за допомогою перевірки значення event.which, можна точно визначити, яка кнопка була натиснута. Якщо ви працюєте з сучасними браузерами, слід звертати увагу на властивість button, оскільки вона надає більше можливостей для точного контролю.
Зазначимо, що властивість which не підтримується для сенсорних екранів та клавіатури, оскільки вона застосовується виключно для подій миші. Для кращої сумісності коду можна використовувати одночасно і which, і button, перевіряючи обидві властивості для забезпечення кросбраузерності.
| Порада: | Не всі події миші мають повну підтримку властивості |
| Порада: | Уникайте використання |
| Порада: | Не забувайте про те, що різні операційні системи та браузери можуть мати різні поведінкові відмінності при натисканні середньої або правої кнопок миші. Завжди тестуйте свій код у кількох браузерах та середовищах. |
Синтаксис
event.whichЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1 |
15 |
79 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі користувач може натискати різні кнопки миші на елементі "Натисни мене". Результат буде відображений в області під кнопкою. Відповідно до того, яка кнопка миші була натиснута (ліва, середня або права), виводиться різне повідомлення. Стандартне контекстне меню (правий клік) вимикається для наочності.
У цьому прикладі ми відстежуємо праве клацання миші за допомогою значення event.which === 3. Це можна використовувати для створення власних контекстних меню або обробки подій правої кнопки миші.
document.addEventListener('mousedown', function(event) {
if (event.which === 3) {
alert('Праве клацання - відкриваємо контекстне меню.');
}
});Цей приклад демонструє використання середньої кнопки миші (event.which === 2). Ви можете використовувати це для спеціальних функцій, наприклад, відкриття нових вкладок або виконання швидких дій без участі основних кнопок.
document.addEventListener('mousedown', function(event) {
if (event.which === 2) {
alert('Середня кнопка миші натиснута.');
}
});