Как найти координаты в браузере

711

2124

Получить координаты курсора на экране

Предлагаем Вам простой JavaScript код, отображающий текущие координаты курсора на экране. Координаты берутся относительно
окна странички и не превышают разрешение экрана.

Данный скрипт позволяет выводить координаты курсора как в statusbar-е, так и в заданном месте странички.

Текущие координаты курсора:

Для получения текущих координат курсора на экране сайта вставьте на свою страничку следующий скрипт:

Далее, в том месте странички, где необходимо получить координаты курсора (если необходимо), вставляем
элемент <span id=»xy»></span>.

Если Вы все правильно сделали, то при перемещении курсора мыши по экрану браузера внутри элемента
<span id=»xy»></span> и в statusbar-е должны отображаться текущие координаты курсора.

Войти на сайт

или

Забыли пароль?
Еще не зарегистрированы?

02.04.2015

Определение координат курсора мыши

Возможности jQuery практически безграничны, главное преимущество — интерактивность. Благодаря jQuery можно создавать очень интересные проекты: будь то разработка сайта коттеджного посёлка или создание лендинг пейдж.

Очень часто нужно знать координаты курсора мыши, чтобы внедрить интерактив с пользователем. Сделать это очень просто, создав функцию, которая будет вызываться при событии mousemove и через event.pageX и event.pageY можно получить координаты курсора.

Помимо этого есть возможность определять координаты относительно другого объекта на сайте. Для этого нужно знать координаты самого объекта и инициализировать функцию определения координат при наведении на нужный объект.

<p id="coords1">Координаты курсора:</p>
<div class="hover">
	<p><b>Наведи курсор сюда</b></p>
	<p id="coords2">Координаты курсора:</p>
</div>

.hover {
	width: 100%;
	height: 200px;
	border: #000 solid 1px;
	padding: 20px;
	box-sizing: border-box;
}

$(document).ready(function(){
	// Координаты курсора относительно всего документа
	$(document).mousemove(function(event){
		var x = event.pageX;
		var y = event.pageY;
		$('#coords1').html( 'Координаты курсора: (' + x + '; ' + y + ')' );
	});
	// Координаты курсора относительно отдельного блока
	$('.hover').mousemove(function(event){
		var pos = $(this).offset();
		var elem_left = pos.left.toFixed(0);
		var elem_top = pos.top.toFixed(0);
		var x = event.pageX - elem_left;
		var y = event.pageY - elem_top;
		$('#coords2').html( 'Координаты курсора: (' + x + '; ' + y + ')' );
	});
});

Демонстрация

Координаты курсора мышки относительно экрана монитора, страницы или окна браузера

Представленные ниже свойства возвращают в px координаты курсора мышки относительно верхнего левого угла

• экрана монитора (screenX/Y),
• HTML-дкумента (pageX/Y),
• области просмотра окна браузера (clientX/Y).

<script>
window.addEventListener('click', function(e) {
  alert('screen: ' + e.screenX + 'x' + e.screenY + 'npage: ' + e.pageX + 'x' + e.pageY + 'nclient: ' + e.clientX + 'x' + e.clientY);
}, false);
</script>

Образец (щелчок по любому месту зелёного прямоугольника):

Определить элемент, который находится под курсором

document.elementFromPoint(X, Y) возвращает верхний элемент, который находится на координатах (X, Y) относительно верхнего левого угла области просмотра окна браузера.

<script>
window.addEventListener('click', function(e) {
  alert(document.elementFromPoint(e.clientX, e.clientY).tagName);
}, false);
</script>

Образец (щелчок по любому месту зелёного прямоугольника):

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

Координаты курсора мышки внутри элемента (div, img)

В Mozilla Firefox не работают offsetX и offsetY. Самое простое решение проблемы указано тут:

<style>
#div {
  position: relative; 
  height: 10em;
  background: green;
}
</style>

<div id="div"></div>

<script>
document.getElementById('div').onclick = function(e) {
  var x = e.offsetX==undefined?e.layerX:e.offsetX;
  var y = e.offsetY==undefined?e.layerY:e.offsetY;
  alert(x +'x'+ y);
}
</script>

Образец (щелчок по любому месту зелёного прямоугольника):

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

Координаты расположения элемента

Расстояние от верхнего/левого края окна браузера до элемента

Метод elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера

<style>
#div {
  height: 10em;
  background: green;
}
</style>

<div id="div"></div>

<script>
var div = document.getElementById('div');
window.addEventListener('scroll', raz, false);
window.addEventListener('resize', raz, false);
function raz() {
  var rect = div.getBoundingClientRect();
  div.innerHTML = 'top: ' + rect.top + '<br>right: ' + rect.right + '<br>bottom: ' + rect.bottom + '<br>left: ' + rect.left + '<br>width: ' + rect.width + '<br>height: ' + rect.height;
}
</script>

Образец (прокрутка или изменение окна браузера, изменение размера элемента):

elem.getBoundingClientRect().width/height поддерживаются с IE9 [developer.mozilla.org]. Кроссбраузерное решение:

width = elem.getBoundingClientRect().right - elem.getBoundingClientRect().left
height = elem.getBoundingClientRect().bottom - elem.getBoundingClientRect().top

Практическое применение: Прилипающий при скроллинге блок

Расстояние от правого/нижнего края окна браузера до элемента

Чтобы узнать отступ справа или снизу от элемента до края области просмотра окна браузера:

<style>
#div {
  height: 10em;
  background: green;
}
</style>

<div id="div"></div>

<script>
window.addEventListener('scroll', raz2, false);
window.addEventListener('resize', raz2, false);
function raz2() {
  var div = document.getElementById('div'),
      rect = div.getBoundingClientRect(),
      d = document.documentElement,
      rectD = d.getBoundingClientRect();
  div.innerHTML = 'top: ' + rect.top + '<br>right: ' + (rectD.right - rect.right) + '<br>bottom: ' + (d.clientHeight - rect.bottom) + '<br>left: ' + rect.left + '<br>width: ' + rect.width + '<br>height: ' + rect.height;
}
</script>

Образец (прокрутка или изменение окна браузера, изменение размера элемента):

Практическое применение: Элемент находится в видимой области окна браузера

Позиция одного элемента относительно другого

Рассчитать позицию одного элемента относительно другого (например, потомка относительно предка) можно, если получить разницу их координат (например, координаты родителя вычесть из координат дочернего элемента):

<style>
#div {
  background: green;
}
#div sub {
  background: yellow;
}
</style>

<div id="div"><sub>Нижний индекс</sub></div>

<script>
var div = document.getElementById('div');
div.childNodes[0].innerHTML = 'Расстояние до нижнего индекса: ' + (div.childNodes[0].getBoundingClientRect().top - div.getBoundingClientRect().top) + 'px';
</script>

_{Нижний индекс}

Смещение относительно elem.offsetParent

elem.offsetParent возвращает ближайшего родителя, имеющего position не static, если у самого элемента elem установлено position: absolute;. Положение элемента относительно elem.offsetParent показывают elem.offsetLeft/Top (IE≥8).

<style>
#div {
  position: relative;
  height: 10em;
  background: green;
  overflow: auto;
}
#div div {
  position: absolute;
  height: 8em;
  width: 90%;
  margin: 1em 5%;
  background: yellow;
}
</style>

<div id="div">
  <div></div>
</div>

<script>
var div = document.querySelector('#div div');
div.innerHTML = 'offsetParent: ' + div.offsetParent + '<br>left: ' + div.offsetLeft + '<br>top: ' + div.offsetTop;
</script>

Размер элемента: ширина, высота, прокрутка

Получить значение свойства CSS можно благодаря getComputedStyle(elem[, pseudo]). Предварительно советую ознакомиться с блочной моделью CSS.

<style>
#div {
  height: 10em;
  padding: 1em;
  border: 1.5em solid gray;
  overflow: auto;
  resize: both;
}
#div div {
  height: 20em;
  background: yellow;
}
</style>

<div id="div">
  <div></div>
</div>

<script>
var div = document.querySelector('#div');
alert('scrollWidth x scrollHeight: ' + div.scrollWidth + 'x' + div.scrollHeight + 'nscrollLeft x scrollTop: ' + div.scrollLeft + 'x' + div.scrollTop + 'noffsetWidth x offsetHeight: ' + div.offsetWidth + 'x' + div.offsetHeight + 'ngetBoundingClientRect().width x getBoundingClientRect().height: ' + div.getBoundingClientRect().width + 'x' + div.getBoundingClientRect().height + 'nclientLeft x clientTop' + div.clientLeft + 'x' + div.clientTop + 'nclientWidth x clientHeight: ' + div.clientWidth + 'x' + div.clientHeight + 'ngetComputedStyle(elem).width x getComputedStyle(elem).height: ' + getComputedStyle(div).width + ' x ' + getComputedStyle(div).height);
</script>

Образец (щелчок по прямоугольнику с серой рамкой, его изменение или прокрутка содержимого):

Размер монитора, страницы, окна браузера: ширина, высота, прокрутка

Размер страницы, учитывающий transform и margin для <html>, который можно получить, пока страница не была прокручена.

var rect = document.documentElement.getBoundingClientRect(),
      b = document.body,
      maxWidth = Math.max(  
        rect.right, b.scrollWidth
      ),
      maxHeight = Math.max(  
        rect.bottom, b.scrollHeight
      );

Образец (изменение, прокрутка содержимого окна браузера):

0

Практическое применение: Открыть ссылку в новом окне заданного размера

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
https://msdn.microsoft.com/en-us/library/hh781509%28v=vs.85%29.aspx