css.in.ua
Підтримати

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 — завершити його.
Порада:

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

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

Синтаксис

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

Значення

Return

Переглядачі

Переглядач

66

57

11.1

53

16
Переглядач

66

66

57

11.3
Переглядач

15.0.0

1.0

Приклади


У цьому прикладі користувач може перетягувати блок за допомогою події mousedown. Коли натиснута кнопка миші, блок починає слідувати за рухом миші (mousemove), і зупиняється при відпусканні кнопки миші (mouseup). Це корисно для створення динамічних інтерфейсів із підтримкою перетягування елементів.

У цьому прикладі реалізовано простий механізм перетягування елемента. При натисканні на елемент починається відстеження його переміщення за допомогою події mousemove, і коли кнопка миші відпускається, перетягування припиняється.

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;
});

Цей приклад демонструє, як реалізувати малювання на HTML-полотні. Подія mousedown ініціює малювання, а подія mousemove дозволяє малювати лінії, поки користувач тримає кнопку миші.

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;
});

Спільнота

Зв'язок