Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Координаты курсора мышки внутри родительского элемента / 2 сообщений из 2, страница 1 из 1
03.12.2015, 16:50
    #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, 17:29
    #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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Координаты курсора мышки внутри родительского элемента / 2 сообщений из 2, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 477ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1445580]:
 0ms
get settings:
 8ms
get forum list:
 19ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 140ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 45ms
get tp. blocked users:
 1ms
others: 246ms
total:  477ms
x
x
Закрыть


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