JS властивість Event.mouseup
Загальний опис
Подія mouseup спрацьовує, коли користувач відпускає кнопку миші після її натискання. Ця подія часто використовується разом із mousedown, яка викликається під час натискання кнопки миші, і mousemove для відстеження руху миші під час перетягування елементів. Подія mouseup особливо корисна в інтерфейсах, де потрібно фіксувати кінцевий стан взаємодії з елементом, наприклад, при завершенні перетягування або виконання кліку.
Властивості події mouseup включають:
button: визначає, яка кнопка миші була відпущена (0 – ліва, 1 – середня, 2 – права).clientXіclientY: координати курсора миші в момент відпускання кнопки.target: елемент, на якому була відпущена кнопка миші.
Приклад використання mouseup для відстеження події:
document.addEventListener('mouseup', function(event) {
console.log('Кнопка миші відпущена на координатах:', event.clientX, event.clientY);
});
Як правило, mouseup використовується для завершення певних дій, наприклад, припинення перетягування елемента або підтвердження кліку. Наприклад, у функціоналі для перетягування елементів подія mouseup сигналізує про закінчення процесу перетягування і дозволяє завершити оновлення стану інтерфейсу.
Також можна визначати, яка саме кнопка миші була відпущена, і виконувати різні дії залежно від того, чи це ліва, середня або права кнопка:
element.addEventListener('mouseup', function(event) {
if (event.button === 2) {
console.log('Відпущена права кнопка миші');
}
});
Таким чином, подія mouseup є невід'ємною частиною створення інтерактивних елементів і динамічних взаємодій із користувачем, дозволяючи завершити почату дію після натискання миші.
| Порада: | Щоб запобігти виконанню дії браузера за замовчуванням (наприклад, виділення тексту), викликайте |
| Порада: | Для визначення, яка саме кнопка миші була відпущена, використовуйте властивість |
| Порада: | Комбінуйте |
Синтаксис
element.addEventListener('mouseup', function(event) {
// обробка події
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі, як тільки користувач натискає на квадрат, він може перетягувати його, а після відпускання кнопки миші (mouseup) квадрат фіксує своє нове положення, відображаючи актуальні координати.
Цей приклад показує, як можна використовувати подію mouseup для завершення процесу перетягування елемента. Перетягування ініціюється при натисканні на елемент і завершуються, коли користувач відпускає кнопку миші, переміщуючи елемент за координатами курсора під час переміщення.
let isDragging = false;
const draggable = document.getElementById('draggable');
draggable.addEventListener('mousedown', function() {
isDragging = true;
});
document.addEventListener('mousemove', function(event) {
if (isDragging) {
draggable.style.left = event.clientX + 'px';
draggable.style.top = event.clientY + 'px';
}
});
document.addEventListener('mouseup', function() {
if (isDragging) {
isDragging = false;
console.log('Перетягування завершено');
}
});У цьому прикладі подія mouseup використовується для відстеження, яка саме кнопка миші була відпущена: ліва, середня або права. Це корисно для реалізації різних функцій залежно від того, яку кнопку миші використовує користувач, наприклад, відкриття контекстного меню або виконання певної дії при кліку на середню кнопку.
document.addEventListener('mouseup', function(event) {
switch(event.button) {
case 0:
console.log('Ліва кнопка миші відпущена');
break;
case 1:
console.log('Середня кнопка миші відпущена');
break;
case 2:
console.log('Права кнопка миші відпущена');
break;
default:
console.log('Інша кнопка');
}
});