offsetX в JavaScript — позиція курсора всередині блока

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

Властивість 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 тощо.

правити

Порада

Для роботи з багаторівневими елементами обчислюйте зміщення відносно батьківського контейнера. Якщо ваш елемент міститься в іншому елементі, offsetX буде прив'язаний до його найближчого контейнера, тому переконайтесь, що контейнер правильний.

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

Порада

Якщо створюєте складні елементи, такі як графіки, використовуйте offsetX для малювання на canvas. Це дозволяє точно відстежувати, де саме користувач натиснув або перемістив курсор, щоб відповідно змінювати малюнок на полотні.

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

Порада

Зробіть коригування для випадків, коли елемент має внутрішні відступи або рамки. Враховуйте їх, щоб offsetX правильно відображав положення всередині елемента, інакше координати можуть бути неточними.

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

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

Синтаксис

event.offsetX

Переглядачі

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

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

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

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

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

Приклади

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

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

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

<header>
  <h2 class="title">MouseEvent -> offsetX</h2>
  <p class="description">Визначає горизонтальну позицію курсора відносно елемента для динамічного вибору кольору.</p>
</header>
<main>
  <div class="result">
    <div class="color-bar" id="colorBar">
      <!-- Панель кольорів -->
    </div>
    <p>Вибраний колір: <span id="colorDisplay">#000000</span></p>
  </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);
}

.color-bar {
  width: 100%;
  height: 30px;
  background: linear-gradient(to right, red, yellow, green, cyan, blue, magenta);
  margin-bottom: 15px;
  cursor: pointer;
}

#colorDisplay {
  font-weight: bold;
  color: #333;
}

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

// Функція для отримання кольору на основі позиції offsetX
function getColorFromOffsetX(offset, elementWidth) {
  const ratio = offset / elementWidth;
  const hue = Math.floor(ratio * 360); // Визначаємо відтінок за шкалою 0-360
  return `hsl(${hue}, 100%, 50%)`; // Повертаємо колір у форматі HSL
}

colorBar.addEventListener('mousemove', event => {
  const selectedColor = getColorFromOffsetX(event.offsetX, colorBar.offsetWidth);
  colorDisplay.textContent = selectedColor;
  colorDisplay.style.color = selectedColor;
});
//# sourceURL=pen.js

<canvas id="canvas" width="300" height="150"></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();
});