Immer relative Maus X/Y in javascript

Ich habe ein div irgendwo auf der Seite. Ich bekomme dann die Maus XY:

        var relativeMouseX = self.gCurrentMouseX - self.gContainerLeft;
        var relativeMouseY = self.gCurrentMouseY - self.gContainerTop;

Wo die aktuelle mousex/y sind erhältlich über:

//Update mouse coords
this.gUpdateMousePos = function(evt) {
    if (evt === undefined) evt = window.event;
    if (window.event) {
        this.gCurrentMouseX = event.clientX;
        this.gCurrentMouseY = event.clientY;
    }
    else {
        this.gCurrentMouseX = evt.clientX;
        this.gCurrentMouseY = evt.clientY;
    }
}

Dies funktionierte gut im Test, aber wenn das div befindet sich eine Seite, die es vermasselt themouse X/Y, die Koordinaten scheinen nur zu werden, in der viewinwg Bereich und nicht die gesamte Seite.

X-co-ord funktioniert gut, weil die Seiten nie horizontal erweitert, breiter als das browser-Größe, aber vertikal ist ein problem!!!

Irgendwelche Ideen, wie man die Maus X/Y relativ zu dem element?

wahrscheinlich werden Sie nur brauchen zu wissen, der position des Elements und Mathematik diese Unterschiede.

InformationsquelleAutor Tom Gullen | 2010-12-21

  1. 2

    event.clientX+document.body.scrollLeft und event.clientX+document.body.scrollTop
    oder
    event.pageX und event.pageY

    Den ersten hinzufügen der aktuellen scroll-position auf den Wert, die zweite ist die Maus-position relativ zu der Seite, nicht das client-Fenster.

    dies ist jedoch relativ zu der Seite, die nicht ein element
    Perfekt danke! Verwendet die scrollTop fix und es funktioniert perfekt.
    Funktioniert nicht in IE, document.documentElement.scrollTop funktioniert über einen breiteren Bereich von doctypes.
    Sie können pageX und pageY im IE

    InformationsquelleAutor JCOC611

  2. 1

    Müssen Sie berücksichtigen die übergeordneten Elemente zu finden, ein Kind-element der wahren position auf der Seite. Sehen http://www.quirksmode.org/js/findpos.html

     /**
 * Locate the real position of an element,
 * relative to its parent's offsets
 */
function findPos (obj) {
    var curleft = 0,
        curtop = 0;

    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);

        return { x: curleft, y: curtop };
    }
}

    InformationsquelleAutor Kai

Schreibe einen Kommentar