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

Приклади

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

<header>
  <h2 class="title">HTML Events: mousedown</h2>
  <p class="description">Перетягування елементів за допомогою події mousedown.</p>
</header>
<main>
  <div class="result">
    <!-- Блок для перетягування -->
    <div id="draggableBox" class="box"></div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.box {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  position: absolute;
  top: 100px;
  left: 100px;
  cursor: grab;
}

.box:active {
  cursor: grabbing;
}

// Отримуємо елемент, який будемо перетягувати
const box = document.getElementById('draggableBox');
let isDragging = false;
let offsetX, offsetY;

// Додаємо подію mousedown, щоб почати перетягування
box.addEventListener('mousedown', function (event) {
  isDragging = true;
  // Зберігаємо різницю між положенням курсора і верхнім лівим кутом блоку
  offsetX = event.clientX - box.offsetLeft;
  offsetY = event.clientY - box.offsetTop;
  // Змінюємо стилі курсора
  box.style.cursor = 'grabbing';
});

// Додаємо подію mousemove для переміщення блоку
document.addEventListener('mousemove', function (event) {
  if (isDragging) {
    box.style.left = event.clientX - offsetX + 'px';
    box.style.top = event.clientY - offsetY + 'px';
  }
});

// Додаємо подію mouseup для завершення перетягування
document.addEventListener('mouseup', function () {
  isDragging = false;
  // Відновлюємо початковий стиль курсора
  box.style.cursor = 'grab';
});
//# sourceURL=pen.js

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