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 є невід'ємною частиною створення інтерактивних елементів і динамічних взаємодій із користувачем, дозволяючи завершити почату дію після натискання миші.

правити

Порада

Щоб запобігти виконанню дії браузера за замовчуванням (наприклад, виділення тексту), викликайте event.preventDefault() у обробнику події mouseup.

автор: Bond правити

Порада

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

автор: Bond правити

Порада

Комбінуйте mouseup з подією click, якщо потрібно обробляти як завершення взаємодії після натискання, так і одноразові кліки. Наприклад, у деяких випадках може бути важливо обробляти завершення натискання без виконання повного циклу mousedown-click.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('mouseup', function(event) {
  // обробка події
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	2	6	4	11.6	12	9

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	6	3.2

Приклади

+ запропонувати свій приклад у пісочниці

<div id="draggable">Демонстраційний елемент</div>

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('Перетягування завершено');
  }
});

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('Інша кнопка');
  }
});