JS властивість Event.mousemove
Загальний опис
Подія mousemove виникає щоразу, коли курсор миші рухається всередині елемента або в межах документу. Ця подія дуже корисна для відстеження координат курсора миші та використовується в таких сценаріях, як створення інтерактивних елементів, малювання на канвасі, або переміщення об’єктів по екрану.
Подія mousemove передає об'єкт події, який містить важливі властивості:
clientXтаclientY: координати курсора відносно вікна браузера.pageXтаpageY: координати курсора відносно всієї сторінки (враховує прокрутку).target: елемент, над яким рухається миша.
Щоб працювати з mousemove, необхідно додати обробник події за допомогою методу addEventListener. Ось приклад:
document.addEventListener('mousemove', function(event) {
console.log('Координати курсора:', event.clientX, event.clientY);
});
Цей код виводить координати курсора при кожному русі миші по документу. Однак важливо враховувати, що подія mousemove може викликатися дуже часто (навіть сотні разів на секунду), тому варто оптимізувати обробники для уникнення навантаження на систему.
У більш складних сценаріях подія mousemove використовується для динамічного оновлення позицій елементів на сторінці або для створення інтерактивних графічних інтерфейсів. Наприклад, малювання на полотні (canvas) часто реалізується через відстеження руху миші.
| Порада: | Поєднуйте |
| Порада: | Для інтерактивних інтерфейсів, таких як малювання або ігри, |
| Порада: | Якщо потрібно зупинити обробку події, викликайте |
Синтаксис
element.addEventListener('mousemove', function(event) {
// обробка події
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Цей приклад демонструє, як подія mousemove може використовуватися для створення динамічного інтерфейсу. Коли користувач рухає мишу по інтерактивному блоку, фон змінюється залежно від положення курсора, створюючи ефект зміни освітлення або кольору. Коли курсор залишає область елемента, фон повертається до початкового кольору. Цей підхід може бути корисним для створення інтерактивних панелей або інтерфейсів.
У цьому прикладі при кожному русі миші створюється маленьке коло, яке слідує за курсором. Через короткий час слід зникає, створюючи ефект тимчасового сліду миші. Такий ефект часто використовується в інтерактивних веб-додатках або іграх.
document.addEventListener('mousemove', function(event) {
const trail = document.createElement('div');
trail.style.position = 'absolute';
trail.style.width = '10px';
trail.style.height = '10px';
trail.style.backgroundColor = 'blue';
trail.style.borderRadius = '50%';
trail.style.left = event.pageX + 'px';
trail.style.top = event.pageY + 'px';
document.body.appendChild(trail);
setTimeout(function() {
trail.remove();
}, 300);
});У цьому прикладі реалізовано малювання на канвасі. Коли користувач натискає кнопку миші і рухає курсором, канвас починає малювати лінії відповідно до руху миші. Подія mousemove відслідковує координати миші і дозволяє малювати в реальному часі, що часто використовується для графічних редакторів.
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;
canvas.addEventListener('mousedown', function() {
isDrawing = true;
});
canvas.addEventListener('mouseup', function() {
isDrawing = false;
ctx.beginPath(); // Почати новий шлях
});
canvas.addEventListener('mousemove', function(event) {
if (isDrawing) {
ctx.lineWidth = 5;
ctx.lineCap = 'round';
ctx.strokeStyle = 'black';
ctx.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
}
});