Отследить координаты клика мыши внутри div'a
188
17 ноября 2018, 12:40
Имеется div размером 400х400рх, находится он в отступe от верхнего края 100рх.
<div style="width: 400px; height: 400px; margin-top: 100px" id="box">
</div>
Далее, хочу написать слежку за координатами нажатия мыши конкретно внутри div'a. Сделал следующее:
<script>
box.onclick = function() {
alert (event.pageX+':'+event.pageY);
}
</script>
Координаты отслеживает, выводит, но счёт начинается не с левого верхнего угла div'a, а именно с угла страницы, как исправить?
Answer 1
Надо отнять от координаты мышки с начала страницы координаты элемента.
Конечно, есть специальное свойство offsetX и offsetY, но они не кроссбраузерные.
box.onclick = function() {
console.log((event.pageX - box.offsetLeft) + ':' + (event.pageY - box.offsetTop));
}#box {
margin: 100px;
background-color: red;
width: 400px;
height: 400px;
}<div id="box"></div>
-
06:53
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
-
20:42
-
09:21
Основные этапы разработки сайта для стоматологической клиники
-
12:26
-
10:30
-
18:43
Продвижение своими сайтами как стратегия роста и независимости
-
22:46
-
06:18
-
12:23
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 50303 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31941 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 26280 visits
- Как через css изменить цвет png изображения? 11765 visits
- Blob video url download 11312 visits
- Php curl запрос через прокси с авторизацией 10721 visits
- Работа с captcha vk api 9517 visits
© "hostciti.net" 19.3.2026 | 11:37