JS властивість Event.mousedown

Загальний опис

Подія mousedown відбувається, коли користувач натискає будь-яку кнопку миші на елементі. Ця подія може бути прив’язана до різних HTML-елементів для відстеження взаємодії користувача з інтерфейсом. На відміну від події click, яка запускається після натискання та відпускання кнопки миші, mousedown викликається в момент натискання.

Для роботи з подією mousedown, використовується метод addEventListener. Цей метод дозволяє слухати подію на будь-якому елементі DOM. Наприклад, можна зареєструвати подію на кнопці:

document.getElementById('myButton').addEventListener('mousedown', function(event) {
  console.log('Натиснуто кнопку миші!');
});

Об'єкт події, який передається в обробник, містить корисну інформацію, таку як:

• button: вказує, яка кнопка миші була натиснута (0 для лівої кнопки, 1 для середньої, 2 для правої).
• clientX і clientY: координати курсора миші відносно вікна під час події.
• target: елемент, на якому сталася подія.

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

document.addEventListener('mousedown', function(event) {
  console.log('Координати:', event.clientX, event.clientY);
  if (event.button === 2) {
    console.log('Натиснуто праву кнопку миші.');
  }
});

Подію mousedown часто використовують у поєднанні з іншими подіями, такими як mousemove та mouseup, для реалізації складної взаємодії з користувачем, наприклад, перетягування елементів або малювання на екрані.

Таким чином, подія mousedown є важливим інструментом для відстеження активних дій користувача з використанням миші.

правити

Порада

Для створення інтерактивних елементів, таких як перетягування, часто поєднують подію mousedown із подіями mousemove та mouseup. Це дозволяє відстежувати рух курсора після натискання та припиняти дію, коли кнопка відпущена. Наприклад, при натисканні можна ініціювати перетягування, а при mouseup — завершити його.

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

Порада

Користувач може випадково відпустити кнопку миші поза межами потрібного елементу. Щоб запобігти цьому, слухайте подію mouseup на документі, а не на конкретному елементі. Це допоможе "зловити" подію відпускання миші навіть за межами елемента.

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

Порада

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

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

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

Синтаксис

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

Переглядачі

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

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

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

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

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

Приклади

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

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

const box = document.getElementById('dragBox');
let isDragging = false;

box.addEventListener('mousedown', function(event) {
  isDragging = true;
});

document.addEventListener('mousemove', function(event) {
  if (isDragging) {
    box.style.left = event.clientX + 'px';
    box.style.top = event.clientY + 'px';
  }
});

document.addEventListener('mouseup', function() {
  isDragging = false;
});

<canvas id="myCanvas" width="300" height="150"></canvas>

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;

canvas.addEventListener('mousedown', function(event) {
  isDrawing = true;
  ctx.beginPath();
  ctx.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
});

canvas.addEventListener('mousemove', function(event) {
  if (isDrawing) {
    ctx.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
    ctx.stroke();
  }
});

canvas.addEventListener('mouseup', function() {
  isDrawing = false;
});