ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Координаты курсора мышки внутри родительского элемента
2 сообщений из 2, страница 1 из 1
Координаты курсора мышки внутри родительского элемента
    #39119697
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Есть к примеру div, который может располагаться за пределами экрана (окно браузера надо прокрутить).
Внутри него могут быть ещё элементы с большим уровнем вложенности. При щелчке в любой элемент diva, хочу узнать координаты мыши относительно этого самого родительского дива.
Нашел функцию, но она не учитывает вложенность. Здесь при щелчке во 2-й спан, будут координаты относительно спана, а нужно относительно div
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#data {
  background:#abcdef;
  padding:5px;
  height:20px;
}
#data span {border:1px solid green;}
</style>
</head>

<body>
<div id="data"> <span>Это спан 1</span> <span>Это спан 2</span></div>

<script>
function getInnerCoords(e) {
  var x = e.offsetX==undefined?e.layerX:e.offsetX;
  var y = e.offsetY==undefined?e.layerY:e.offsetY;
  return {x:Math.round(x), y:Math.round(y)};
}

document.getElementById('data').onmousedown = getMouseCoord;
function getMouseCoord(e) {
  //e.stopPropagation();
  var m = getInnerCoords(e);
  console.log(this, 'x = ' + m.x, 'y = ' + m.y);
}
</script>
</body>
</html>


stopPropagation, как и ожидалось, не влияет... Решение нужно без jQuery и прочих библиотек.
...
Рейтинг: 0 / 0
03.12.2015, 16:50
| Ответить | Цитировать | Написать  
Координаты курсора мышки внутри родительского элемента
    #39119742
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Решил таким образом, даже в IE 10 работает
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#data {
  background:#abcdef; position:absolute; padding:10px;
  left:2500px; height:20px; top:2000px; width:400px;
}
#data span {border:1px solid green;}
</style>
</head>

<body>
<div id="data"> <span>Это спан 1</span> <span>Это спан 2</span></div>

<script>
function getCoords(elem) {
  var box = elem.getBoundingClientRect();
  return {
    top: box.top + pageYOffset,
    left: box.left + pageXOffset
  };
}

document.getElementById('data').onmousedown = getMouseCoord;
function getMouseCoord(e) {
  var m = getCoords(this);
  var x = e.pageX - m.left, y = e.pageY - m.top;
  console.log('x = ' + x, 'y = ' + y);
}
</script>
</body>
</html>
...
Рейтинг: 0 / 0
03.12.2015, 17:29
| Ответить | Цитировать | Написать  
2 сообщений из 2, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Координаты курсора мышки внутри родительского элемента
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]