Как я могу получить координаты мыши относительно родительского элемента 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 того, что происходит выше.

http://jsfiddle.net/N6PJu/1

11
events javascript mousemove

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;}

1

принятый ответ не работает для меня в 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};
}
35

получить screenX и screenY свойства, чтобы увидеть, где мышь находится на экране (и, возможно, принять во внимание scrollHeight!).

затем получите левую и верхнюю части элемента контейнера и вычислите смещение между ними: это положение мыши в элементе.

посмотреть https://developer.mozilla.org/en-US/docs/DOM/MouseEvent для более подробной информации.

0

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);
0