JS властивість Event.button
Загальний опис
button — це властивість об'єкта MouseEvent, яка повертає номер кнопки миші, що була натиснута під час події. Вона використовується для визначення, яка саме кнопка була задіяна: ліва, середня чи права. Значення, яке повертає button, є числовим і відповідає стандарту: 0 — ліва кнопка, 1 — середня кнопка (колесо), 2 — права кнопка. Ця властивість стає в нагоді, коли вам потрібно обробляти події миші більш точно і реагувати залежно від того, яку саме кнопку натиснув користувач.
Наприклад, коли користувач натискає ліву кнопку миші, властивість button повертає значення 0. Якщо він натискає середню кнопку (звичайно це колесо миші), значення буде 1. Для правої кнопки миші значення буде 2.
Ось приклад обробки кліку:
document.addEventListener('mousedown', (event) => {
if (event.button === 0) {
console.log('Ліва кнопка миші натиснута.');
} else if (event.button === 1) {
console.log('Середня кнопка миші натиснута.');
} else if (event.button === 2) {
console.log('Права кнопка миші натиснута.');
}
});
Як показано в прикладі, ви можете легко відслідковувати, яка кнопка була натиснута, і в залежності від цього виконувати відповідні дії. Це особливо корисно при створенні контекстних меню або специфічної взаємодії для кожної кнопки миші.
Також важливо зазначити, що ця властивість обробляється лише в подіях, пов'язаних з мишею, таких як mousedown, mouseup або click. При роботі з мобільними пристроями або сенсорними екранами властивість button не використовується, оскільки там немає фізичних кнопок миші.
| Порада: | Зупиняйте подальше розповсюдження події за допомогою методу |
| Порада: | Використовуйте |
| Порада: | Не забувайте тестувати взаємодію з подіями |
Синтаксис
event.buttonЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1 |
10.6 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі користувач взаємодіє з квадратом, натискаючи на нього різні кнопки миші. Ліва кнопка змінює колір квадрата на зелений, середня — на блакитний, а права — на червоний. Крім того, для правої кнопки миші вимикається стандартне контекстне меню, щоб взаємодія з квадратом була більш інтуїтивною.
Цей приклад демонструє, як різні кнопки миші можуть змінювати вигляд елемента. Ліва кнопка миші змінює колір елемента на зелений, а права — на червоний, що дозволяє створювати різні варіанти взаємодії з елементами на сторінці.
document.addEventListener('mouseup', (event) => {
const element = document.getElementById('targetElement');
if (event.button === 0) {
element.style.backgroundColor = 'lightgreen'; // Зміна кольору при натисканні лівої кнопки
} else if (event.button === 2) {
element.style.backgroundColor = 'lightcoral'; // Зміна кольору при натисканні правої кнопки
}
});У цьому прикладі середня кнопка миші використовується для відкриття нового розділу на сторінці. Зазвичай ця кнопка не використовується для спеціальних дій, тому її можна налаштувати для виконання будь-якої кастомної функції.
document.addEventListener('mousedown', (event) => {
if (event.button === 1) {
console.log('Середня кнопка натиснута: відкриття нового розділу.');
openNewSection();
}
});
function openNewSection() {
// Логіка для відкриття нового розділу сторінки
console.log('Новий розділ відкрито');
}