JS властивість Event.offsetX
Загальний опис
Властивість offsetX об'єкта MouseEvent повертає горизонтальну координату курсора миші відносно елемента, на якому відбулася подія. Це зручний інструмент для відстеження точного розташування курсора всередині елемента під час кліку, переміщення миші чи інших подій. На відміну від інших координатних властивостей, offsetX прив'язаний до лівого краю елемента, на якому спрацювала подія, що робить його корисним у випадках, коли необхідно знати точну позицію миші всередині конкретного елемента, а не на сторінці загалом.
Використання offsetX особливо ефективне при побудові інтерактивних елементів інтерфейсу, таких як слайдери, графіки або інші елементи, які реагують на позицію курсора. Наприклад, у випадку перетягування елементів ви можете використовувати offsetX для коригування позиції елемента, орієнтуючись на місце, де курсор натиснув на елемент.
Ось приклад, як використовувати offsetX у події mousemove, щоб відстежити курсор всередині елемента:
const element = document.getElementById('myElement');
element.addEventListener('mousemove', (event) => {
console.log(`Курсор на позиції X: ${event.offsetX}`);
});
Коли курсор рухається над елементом з ідентифікатором myElement, в консолі буде відображатися горизонтальна позиція миші відносно цього елемента. Це дозволяє легко отримати доступ до поточного положення курсора в рамках елемента, не враховуючи його абсолютне розташування на сторінці.
offsetX також корисний для розробки інтерактивних ефектів, таких як збільшення елементів при наведенні або динамічне змінення кольору залежно від позиції миші. Він працює для всіх елементів, які можуть отримувати події миші, таких як div, canvas, img тощо.
| Порада: | Для роботи з багаторівневими елементами обчислюйте зміщення відносно батьківського контейнера. Якщо ваш елемент міститься в іншому елементі, |
| Порада: | Якщо створюєте складні елементи, такі як графіки, використовуйте |
| Порада: | Зробіть коригування для випадків, коли елемент має внутрішні відступи або рамки. Враховуйте їх, щоб |
Синтаксис
event.offsetXЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
39 |
1 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
43 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі offsetX визначає позицію миші на елементі панелі кольорів, що використовується для обчислення відтінку кольору (від червоного до фіолетового) за шкалою HSL. Кожен рух миші по панелі оновлює відображений колір у форматі HSL, дозволяючи користувачу вибирати кольори в реальному часі на основі горизонтального положення миші.
Тут offsetX використовується для визначення позиції курсора на полотні canvas, де малюється круг, що слідує за мишею. Це забезпечує створення простого динамічного ефекту, який може бути корисним у графічних редакторах або ігрових додатках.
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
canvas.addEventListener('mousemove', (event) => {
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(event.offsetX, 50, 20, 0, 2 * Math.PI);
context.fillStyle = 'blue';
context.fill();
});У цьому прикладі слайдер змінює свій фон у відповідності до положення миші. offsetX використовується для обчислення відсотка, який відповідає горизонтальній позиції курсора, що дозволяє динамічно змінювати стиль слайдера.
const slider = document.getElementById('slider');
slider.addEventListener('mousemove', (event) => {
const position = event.offsetX / slider.offsetWidth * 100;
slider.style.background = `linear-gradient(to right, #4caf50 ${position}%, #f1f1f1 ${position}%)`;
});