ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 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):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&gotonew=1&tid=1445580]:
 0ms
get settings:
 10ms
get forum list:
 20ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 167ms
get topic data:
 14ms
get first new msg:
 8ms
get forum data:
 4ms
get page messages:
 57ms
get tp. blocked users:
 2ms
others: 232ms
total:  522ms
созд. / загр.: 522ms
x
x
Закрыть


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