Как я могу получить координаты мыши относительно родительского элемента div? Яваскрипт
в настоящее время у меня есть div, структурированный с другими элементами внутри него.
что-то похожее на ниже;
<div id="container" style="position: relative; width: 500px; height: 500px;">
<div style="position: absolute; left: 50px; top: 50px;"></div>
<div style="position: absolute; left: 100px; top: 100px;"></div>
</div>
Я пытаюсь получить положение мыши относительно div с идентификатором container
.
пока у меня есть это:
function onMousemove(event) {
x = event.offsetX;
y = event.offsetY;
};
var elem = document.getElementById("container");
elem.addEventListener("mousemove", onMousemove, false);
это отлично работает, если div с id container
нет детей. Когда container
у div есть дети, он получает координаты мыши относительно ребенка, а не родителя.
Что Я означает это, если мышь была в положении x: 51, y: 51
относительно родительского div, он фактически вернется x: 1, y: 1
относительно дочернего div, используя html, указанный выше.
как я могу достичь того, что я хочу, никаких библиотек, пожалуйста.
редактировать
tymeJV любезно сделал jsfiddle того, что происходит выше.
4 ответов
по существу: 'mouseposition' - 'позиция родительского элемента' = 'mouseposition относительно родительского элемента'
Итак, здесь я изменил вашу функцию:
function onMousemove(e){
var m_posx = 0, m_posy = 0, e_posx = 0, e_posy = 0,
obj = this;
//get mouse position on document crossbrowser
if (!e){e = window.event;}
if (e.pageX || e.pageY){
m_posx = e.pageX;
m_posy = e.pageY;
} else if (e.clientX || e.clientY){
m_posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
m_posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
//get parent element position in document
if (obj.offsetParent){
do {
e_posx += obj.offsetLeft;
e_posy += obj.offsetTop;
} while (obj = obj.offsetParent);
}
// mouse position minus elm position is mouseposition relative to element:
dbg.innerHTML = ' X Position: ' + (m_posx-e_posx)
+ ' Y Position: ' + (m_posy-e_posy);
}
var elem = document.getElementById('container');
elem.addEventListener('mousemove', onMousemove, false);
var dbg=document.getElementById('dbg'); //debut output div instead of console
здесь рабочая демо-скрипка. Как вы можете прочитать в коде, это также смотрит на положение прокрутки документа.
статья PPK на'свойства события' и 'найти позицию' (как всегда) хорошее чтение!
надеюсь, что это помогает!
обновление:
Я действительно нашел ошибку в коде ppk (насколько это редко?!): Я исправил ошибку var
in:if (!e) var e = window.event;
to if (!e){e = window.event;}
принятый ответ не работает для меня в Chrome. Вот как я решил это:
function relativeCoords ( event ) {
var bounds = event.target.getBoundingClientRect();
var x = event.clientX - bounds.left;
var y = event.clientY - bounds.top;
return {x: x, y: y};
}
получить screenX и screenY свойства, чтобы увидеть, где мышь находится на экране (и, возможно, принять во внимание scrollHeight!).
затем получите левую и верхнюю части элемента контейнера и вычислите смещение между ними: это положение мыши в элементе.
посмотреть https://developer.mozilla.org/en-US/docs/DOM/MouseEvent для более подробной информации.
HTML-код
<div id="container" style="position: relative; width: 500px; height: 500px;">
<div style="position: absolute; left: 50px; top: 50px;"></div>
<div style="position: absolute; left: 100px; top: 100px;"></div>
</div>
в JavaScript
function onMousemove(event) {
x = event.layerX; // position x relative to div
y = event.layerY; // position y relative to div
};
var elem = document.getElementById("container");
elem.addEventListener("mousemove", onMousemove, false);