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

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

Властивість offsetY об'єкта MouseEvent повертає вертикальну координату курсора миші відносно верхньої межі елемента, на якому відбулася подія. Це дуже корисна властивість для відстеження позиції миші всередині конкретного елемента, дозволяючи точніше контролювати реакції на події, як-от кліки чи рухи миші.

Використання offsetY є особливо актуальним при роботі з інтерактивними компонентами, такими як інструменти малювання, слайдери або панелі управління, де потрібно знати точне положення миші відносно елемента. На відміну від clientY, який повертає позицію миші відносно всього вікна браузера, offsetY зосереджує увагу на конкретному елементі, що дозволяє створювати більш локалізовані та адаптивні ефекти.

Наприклад, якщо ви розробляєте інтерфейс для вертикального слайдера, offsetY дозволить легко визначити, на якій висоті елемента знаходиться миша:

const slider = document.getElementById('vertical-slider');

slider.addEventListener('mousemove', (event) => {
    console.log(`Курсор на позиції Y: ${event.offsetY}`);
});

Тут кожен рух миші над слайдером відображає його вертикальну позицію у консолі. Це дозволяє відстежувати зміни і адаптивно реагувати на них, створюючи більш складну логіку на основі положення курсора. Властивість offsetY підтримується у всіх сучасних браузерах і працює з елементами, здатними отримувати події миші (як-от div, canvas, img тощо). У випадках, коли потрібно створити інструменти для малювання або аналізувати координати при кліках у графічних інтерфейсах, offsetY стає незамінним інструментом.

правити

Порада

Якщо ви працюєте з елементами, що мають внутрішні відступи, врахуйте, що offsetY поверне позицію без урахування цих відступів. Це може вплинути на точність позиціонування, тому додайте коригування, якщо це необхідно.

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

Порада

Враховуйте, що offsetY визначається відносно контейнера, в якому знаходиться елемент. Якщо ви маєте складну структуру з кількома вкладеними елементами, переконайтесь, що розрахунки offsetY відповідають очікуванням для вашого контейнера.

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

Порада

Пам'ятайте, що offsetY також можна використовувати для визначення координат при кліках у графічних інтерфейсах, як-от canvas. Це дозволяє точніше контролювати поведінку елементів при малюванні чи інтерактивних подіях.

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

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

Синтаксис

event.offsetY

Переглядачі

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

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

Переглядач
	1	39	1	≤12.1	12	9

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

Переглядач
	4.4	18	43	1

Приклади

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

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

const colorBar = document.getElementById('colorBar');

colorBar.addEventListener('mousemove', (event) => {
    const transparency = event.offsetY / colorBar.offsetHeight;
    colorBar.style.backgroundColor = `rgba(0, 150, 255, ${transparency})`;
});

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

const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');

canvas.addEventListener('mousemove', (event) => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.moveTo(0, event.offsetY);
    ctx.lineTo(canvas.width, event.offsetY);
    ctx.strokeStyle = 'red';
    ctx.stroke();
});