Javascript получение координат мыши

Как определить координаты мыши при помощи JavaScript

Довольно часто JavaScript-программистам, необходимо знать координаты курсора мыши относительно окна браузера.

Решение очень простое на самом деле, ниже показан пример и сам исходный код решения.

Двигай курсором или нажимай левой кнопкой мыши по экрану и наблюдай как меняются координаты.

// X-координата
getX: function (e)
if (e.pageX)
return e.pageX;
>
else if (e.clientX)
return e.clientX+( document .documentElement.scrollLeft || document .body.scrollLeft) — document .documentElement.clientLeft;
>

// Y-координата
getY: function (e)
if (e.pageY)
return e.pageY;
>
else if (e.clientY)
return e.clientY+( document .documentElement.scrollTop || document .body.scrollTop) — document .documentElement.clientTop;
>

document .onmousemove = function (e)
if (!e) e = window .event;

var mouseCoordsLayer = document .getElementById( ‘mouse_coords_on_move’ );
mouseCoordsLayer.innerHTML = ‘

Координаты во время движения

‘ ;
mouseCoordsLayer.innerHTML += ‘

X: ‘ +MouseCoords.getX(e)+ ‘

‘ ;
mouseCoordsLayer.innerHTML += ‘

Y: ‘ +MouseCoords.getY(e)+ ‘

‘ ;
>

document .onclick = function (e)
if (!e) e = window .event;

var mouseCoordsLayer = document .getElementById( ‘mouse_coords_on_click’ );
mouseCoordsLayer.innerHTML = ‘

Координаты при клике

‘ ;
mouseCoordsLayer.innerHTML += ‘

X: ‘ +MouseCoords.getX(e)+ ‘

‘ ;
mouseCoordsLayer.innerHTML += ‘

Y: ‘ +MouseCoords.getY(e)+ ‘

‘ ;
>

Разъяснение

Объект MouseCoords имеет 2 метода MouseCoords.getX(e) и MouseCoords.getY(e) , которые принимают параметр e (event) , самое главное этот параметр получить, после какого-либо события (движение мыши, клик по области экрана и т.д.)

Затем на примере описываются 2 события:

1. document.onmousemove — движение курсором мыши по экрану;
2. document.onclick — клик левой кнопкой мыши по любому месту на экране.

В этих событиях создается event и передается в качестве параметра методам объекта MouseCoords .

Источник

MouseEvent: pageX property

The pageX read-only property of the MouseEvent interface returns the X (horizontal) coordinate (in pixels) at which the mouse was clicked, relative to the left edge of the entire document. This includes any portion of the document not currently visible.

Being based on the edge of the document as it is, this property takes into account any horizontal scrolling of the page. For example, if the page is scrolled such that 200 pixels of the left side of the document are scrolled out of view, and the mouse is clicked 100 pixels inward from the left edge of the view, the value returned by pageX will be 300.

Originally, this property was defined as a long integer. The CSSOM View Module redefined it as a double float. See the Browser compatibility section for details.

See Coordinate systems for additional information about coordinates specified in this fashion.

Value

A floating-point number of pixels from the left edge of the document at which the mouse was clicked, regardless of any scrolling or viewport positioning that may be in effect.

This property was originally specified in the Touch Events specification as a long integer, but was redefined in the CSSOM View Module to be a double-precision floating-point number to allow for subpixel precision. Even though numeric types both are represented by Number in JavaScript, they may be handled differently internally in the browser’s code, resulting in potential behavior differences.

See Browser compatibility to learn which browsers have been updated to use the revised data type.

Examples

Showing the mouse position relative to page origin

Let’s take a look at a simple example that shows you the mouse’s position relative to the page’s origin. Since this example is presented in an , that top-left corner is the top-left corner of the frame, not the browser window.

HTML

div class="box"> p>Move the mouse around in this box to watch its coordinates change.p> p>code>pageXcode>: span id="x">n/aspan>p> p>code>pageYcode>: span id="y">n/aspan>p> div> 

The HTML is simple; the box we’ll be watching for mouse events on is given the class «box» . It has two elements, one with the ID «x» and one with the ID «y» . Those will be updated each time an event occurs to contain the latest mouse coordinates relative to the page.

CSS

The CSS used for this example is shown below.

.box  width: 400px; height: 250px; border: 2px solid darkblue; background-color: blue; color: white; font: 16px "Zilla", "Open Sans", "Helvetica", "Arial", sans-serif; > 

JavaScript

const box = document.querySelector(".box"); const pageX = document.getElementById("x"); const pageY = document.getElementById("y"); function updateDisplay(event)  pageX.innerText = event.pageX; pageY.innerText = event.pageY; > box.addEventListener("mousemove", updateDisplay, false); box.addEventListener("mouseenter", updateDisplay, false); box.addEventListener("mouseleave", updateDisplay, false); 

The JavaScript code uses addEventListener() to register the function updateDisplay() as the event handler for the mousemove , mouseenter , and mouseleave events.

Result

More examples

You can also see an example that demonstrates how to access the mouse position information in every available coordinate system.

Specifications

Prior to being added to the CSSOM View specification, pageX and pageY were available on the UIEvent interface in a limited subset of browsers for a short time.

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Получение координат курсора мыши на JS

На этом уроке мы научимся выводить на странице значения координат (X, Y) курсора, в момент движения мыши внутри блока с помощью JavaScript. Определение координат курсора мыши прямо на лету, активно используется в программировании игр, при масштабировании элемента внутри заданной области и много где еще.

Посмотрите демо на CodePen

HTML разметка

Создадим один блок с классом block, внутри которого будем двигать мышью. Во втором блоке с классом coords, будут выводится значения текущих координат курсора.

CSS код

Обоим блокам зададим class оформление для презентабельного вида.

.block width: 200px; /* ширина */
height: 150px; /* высота */
border: 10px solid plum; /* толщина и цвет сплошной рамки */
margin: 40px auto; /* отступ сверху и горизонтальное выравнивание по центру */
text-align: center; /* текст в центре по горизонтали */
line-height: 150px; /* текст в центре по вертикали */
font-size: 20px; /* размер шрифта */
font-family: sans-serif; /* семейство шрифтов */
>

.coords width: 180px; /* ширина */
border: 10px solid plum; /* толщина и цвет сплошной рамки */
margin: 10px auto; /* отступ сверху и горизонтальное выравнивание по центру */
padding: 10px; /* поля вокруг, чтобы текст не прилипал к рамке */
font-size: 30px; /* размер шрифта */
font-weight: 700; /* жирность шрифта */
font-family: ‘Arial Narrow Bold’, sans-serif; /* семейство шрифтов */
>

JavaScript код

Чтобы отловить координаты, нужно на первый блок повесить событие перемещения мыши onmousemove. Для этого из документа получим сам блок по его селектору (.block)

Затем напишем анонимную функцию и в скобках передадим ей объект события event. Анонимная функция — это функция без имени, которая которая применяется только один раз.

Как работает механизм отслеживания координат? Выведем в консоль браузера объект события event, наведем мышку внутри блока и сразу сработает событие MouseEvent. console.log(event); // вывод в консоль

Среди внушительного списка разных свойств, вы увидите значения координат. Нас интересуют координаты offsetX и offsetY, которые показывают координаты мыши относительно блока.

Координаты мыши внутри объекта определяются свойством события offset. Указываем место во втором блоке, где будут выводится значения координат из объекта события event. Получаем из документа span с классом x и вписываем в HTML страницу, координату offsetX. Точно так же поступаем и с координатой .

document.querySelector(‘.x’).innerHTML = event.offsetX;
document.querySelector(‘.y’).innerHTML = event.offsetY;

document.querySelector(‘.block’).onmousemove = function(event) event = event || window.event; // кроссбраузерность
console.log(event); // вывод в консоль
document.querySelector(‘.x’).innerHTML = event.offsetX;
document.querySelector(‘.y’).innerHTML = event.offsetY;
>

Получение координат курсора относится к базовой основе языка JavaScript. Если вам было интересно и вы хотели бы продолжить дальше знакомство с JS, то приглашаю вас на мой видеокурс. Гарантирую, что скучно вам точно не будет, ведь курс содержит массу практических примерова и упражнений.

Создано 08.06.2020 10:15:30

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник

как получить координаты мыши js

Для получения координат мыши в JavaScript необходимо добавить событие «mousemove» на элемент, на котором нужно отслеживать движение мыши. Затем в обработчике события можно получить координаты мыши через объект события.

const elem = document.querySelector('.my-element'); // выбираем элемент, на котором будем отслеживать движение мыши elem.addEventListener('mousemove', function (event)  // добавляем обработчик события "mousemove" const x = event.clientX; // получаем координату X мыши const y = event.clientY; // получаем координату Y мыши console.log(`Координаты мыши: x=$x>, y=$y>`); // выводим координаты мыши в консоль >); 

В данном примере мы выбрали элемент с классом «my-element» и добавили на него обработчик события «mousemove». Внутри обработчика мы получили координаты мыши через объект события event.clientX (координата X) и event.clientY (координата Y). Затем мы вывели эти координаты в консоль.

Источник