Wie kann ich die Maus-Koordinaten relativ zu einem übergeordneten div? Javascript

Moment habe ich ein div angelegt, mit anderen Elementen innerhalb der it.

Etwas ähnliches wie unten;

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

Ich versuche, die Maus-position relativ zu dem div mit der id container.

Bisher habe ich diese;

function onMousemove(event) {

    x = event.offsetX;
    y = event.offsetY;
};

var elem = document.getElementById("container");
elem.addEventListener("mousemove", onMousemove, false);

Dies funktioniert gut, wenn das div-Element mit der id container hat keine Kinder. Wenn die container div Kinder hat, bekommt es die Maus-Koordinaten relativ zum Kind eher als die Eltern.

Was ich durch dieses bedeute, ist, wenn die Maus an einer position von x: 51, y: 51 relativ zum übergeordneten div, wäre es tatsächlich zurück x: 1, y: 1 relativ zum child-div, mit der html-oben angegeben.

Wie kann ich erreichen, was ich will, keine Bibliotheken bitte.

BEARBEITEN

tymeJV hat freundlichst ein jsfiddle, was geschehen ist oben.

http://jsfiddle.net/N6PJu/1

  • Ich habe verspottet ein Turnschuh bis: jsfiddle.net/N6PJu/1 - Ist dieser zu sehen, Ihre Fehler richtig?
  • Ja, dass ist das, was passiert ist, ich danke Ihnen für das 🙂
InformationsquelleAutor GriffLab | 2013-04-22
  1. 5

    Im wesentlichen: 'mouseposition' - 'parent-element position' = 'mouseposition relativ zum übergeordneten element'

    So, hier habe ich geändert, die Funktion:

    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

    Hier ist ein funktionsfähige demo-fiddle. Wie Sie Lesen können in den code, dieser sieht auch im Dokument ist die scroll-position.

    PPK ' s Artikel 'Ereignis-Eigenschaften' und 'finden position' sind (wie immer) gut zu Lesen!

    Hoffe, das hilft!

    Update:

    Ich fand tatsächlich einen Fehler in der ppk-code (wie selten ist das denn?!): Ich korrigierte die fehlerhafte var in:

    if (!e) var e = window.event; zu if (!e){e = window.event;}

    • Ich bin mir sicher, dass das Thema poster schätzt den Aufwand (und ich auch), aber ich hoffe, das dauert nicht Weg von "suchen&finden' im Gegensatz zu 'kopieren,verwenden Sie&don 'T verstehen'. Verantwortungsvoll handeln hier, Thema poster 😉
    • Thx!!! Vollständige Erklärung für den code ist in der gelieferten PPK links. Es erklärt das Prinzip und es beweist und (denn wer liest) Punkte alle gängigen Fallstricke. Allerdings habe ich in der Regel tun, sind sich einig: es ist besser, Sie zu lehren, 'm, wie man Fisch. Aber in diesem Fall wäre es erforderlich, ein Kapitel aus einem Buch zu zeigen, all diese (cross-browser) Fallstricke. Übrigens, wir auch weiß nicht, ob der Fragesteller (oder andere zukünftige Leser) wird oder nicht die Zeit nehmen um den code zu verstehen.
    • Ich glaube nicht, kopieren und einfügen nur lernen und schreiben es selbst 🙂
    • Gut! 🙂
    InformationsquelleAutor GitaarLAB
  2. 51

    Akzeptiert die Antwort nicht für mich in Chrom. Hier ist, wie ich es gelöst:

    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};
}
    • Sehr elegante Lösung. Die Antwort auf die OP ' s Frage, die Sie gerade brauchen, um swap - event.target für document.getElementById("container").
    • wem auch immer dies betreffen mag, das JSFiddle demo der akzeptierten Antworten (jsfiddle.net/N6PJu/3), derzeit funktioniert in Chrome.
    InformationsquelleAutor Nikita Volkov
  3. 1

    Holen Sie sich die screenX und screenY Eigenschaften, um zu sehen, wo der Mauszeiger auf dem Bildschirm (und möglicherweise nehmen die scrollHeight berücksichtigt!).

    Dann erhalten Sie die Links und oben auf dem container-element, und berechnen Sie den offset zwischen Ihnen: das ist die position der Maus in das element.

    Sehen https://developer.mozilla.org/en-US/docs/DOM/MouseEvent für mehr details.

    InformationsquelleAutor Willem Mulder
  4. 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);
    InformationsquelleAutor Le Fem
Schreibe einen Kommentar