Некоторые вероятно задумывались. а какие координаты, и если они у курсора, что в этой статье вы узнаете о выводе координат курсора на экране. Что смотрится интересно, где первая функция показывает координаты в онлайн режиме.
Но только стоит нажать на правый клик, как вы получите полностью координаты, где в этот момент находится курсор. Это такая фишка, которая может кому та быть интересна, где можно изначально посмотреть на demo странице.
Подключаем библиотеку
Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
HTML
Код
<p><strong>Координаты курсора:</strong> <span id="coord-live"></span></p>
<p><strong>Координаты клика:</strong> <span id="coord-click"></span></p>
JS
Код
function getPosition(e){
var x = y = 0;
if (!e) {
var e = window.event;
}
if (e.pageX || e.pageY){
x = e.pageX;
y = e.pageY;
} else if (e.clientX || e.clientY){
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return {x: x, y: y}
}
/* Координаты курсора */
$('body').mousemove(function(e){
var coord = getPosition(e);
$('#coord-live').html(coord.x + "," + coord.y);
});
/* Координаты клика */
$('body').click(function(e){
var coord = getPosition(e);
$('#coord-click').html(coord.x + "," + coord.y);
});
На этом установка завершена.
Демонстрация
