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 є важливим інструментом для відстеження активних дій користувача з використанням миші.
| Порада: | Для створення інтерактивних елементів, таких як перетягування, часто поєднують подію |
| Порада: | Користувач може випадково відпустити кнопку миші поза межами потрібного елементу. Щоб запобігти цьому, слухайте подію |
| Порада: | Зверніть увагу, що події |
Синтаксис
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;
});