Свойство clientX события MouseEvent

События DOM MouseEvent

Определение и использование

Когда событие мыши инициируется, свойство clientX возвращает горизонтальную координату курсора мыши (по клиентской области).

Клиентская область - это текущее окно.

Совет:Чтобы получить вертикальную координату курсора мыши (по клиентской области), используйте Атрибут clientY.

Комментарий:Эта свойство только для чтения.

Пример

Пример 1

Вывод координат курсора мыши при单击 на элементе:

var x = event.clientX;     // Получение горизонтальной координаты
var y = event.clientY;     // Получение вертикальной координаты
var coor = "X coords: " + x + ", Y coords: " + y;

Попробуйте сами

Пример 2

Вывод координат курсора мыши при перемещении мыши по элементу:

var x = event.clientX;
var y = event.clientY; 
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;

Попробуйте сами

Пример 3

Демонстрация различий между clientX и clientY, а также screenX и screenY:

var cX = event.clientX;
var sX = event.screenX;
var cY = event.clientY;
var sY = event.screenY;
var coords1 = "client - X: " + cX + ", Y coords: " + cY;
var coords2 = "screen - X: " + sX + ", Y coords: " + sY;

Попробуйте сами

Синтаксис

event.clientX

Технические детали

Возвратное значение: Числовое значение, представляющее горизонтальную координату курсора мыши в пиках.
Версия DOM: Уровень 2 событий DOM

Поддержка браузеров

Свойства Chrome IE Firefox Safari Opera
clientX Поддержка Поддержка Поддержка Поддержка Поддержка

Связанные страницы

Руководство HTML DOM:Атрибут clientY MouseEvent

Руководство HTML DOM:Атрибут screenX MouseEvent

Руководство HTML DOM:Атрибут screenY MouseEvent

Руководство HTML DOM:Атрибут offsetX MouseEvent

Руководство HTML DOM:Атрибут offsetY MouseEvent

События DOM MouseEvent