[JS] Muispositie bepalen in DIV

[intermusic]

Ik heb de volgende code om de muispositie te bepalen in de body:

Java:

window.event.x

Nu probeer ik de muispositie te bepalen in de DIV (id=divid) met de volgende code:

Java:

document.getElementById("divid").clientY

Dit laatste werkt dus niet.

Waar het om gaat:
Het is een pagina waarin gescrolled kan worden. De div valt, vóór het scrollen, buiten de pagina.
Nu wil ik wel de muispositie bepalen in de DIV ook al is er al gescrolled.
De hoogte van het getal ligt, ten opzichte van alleen de body, dus hoger.

[crisp]

JavaScript:

document.getElementById('divid').onmousemove = handler;

function handler(e)
{
    e = e || window.event;

    var mousex = e.layerX || e.x || e.offsetX;
    var mousey = e.layerY || e.y || e.offsetY;
}

works for me...

[frickY]

Je weet dat je ook kunt afvangen hoever een pagina is gescrollt? Als je de exacte positie van je DIV weet, welke je volgens mij ook kunt bepalen met javascript, kun je dat bij elkaar optellen.

[intermusic]

Geeft de hgele tijd undefined aan.

Om te testen if ik wel de juiste div heb doe ik het volgende:

Java:

alert(document.getElementById("divid").id);

Dan geeft ie aan "divid". Ik heb dus de juiste div.

Dan doe ik het volgende:

Java:

alert(document.getElementById("divid").offsetX);
of
alert(document.getElementById("divid").layerX);
of
alert(document.getElementById("divid").x);

De hele tijd geeft ie aan "undefined"

[crisp]

intermusic schreef op donderdag 02 februari 2006 @ 22:16:
Geeft de hgele tijd undefined aan.

Om te testen if ik wel de juiste div heb doe ik het volgende:

Java:

alert(document.getElementById("divid").id);

Dan geeft ie aan "divid". Ik heb dus de juiste div.

Dan doe ik het volgende:

Java:

alert(document.getElementById("divid").offsetX);
of
alert(document.getElementById("divid").layerX);
of
alert(document.getElementById("divid").x);

De hele tijd geeft ie aan "undefined"

Het zijn ook geen properties van je element maar properties van een event...

[intermusic]

Misschien een dom probeersel maar,

Java:

document.getElementById("divid").event.x

werkt ook niet.

[intermusic]

Ook dit even opgezocht:

event.x
event.y
These properties hold the X and Y pixel coordinates of the cursor relative to the layer connected with the event or, for the onResize event, the width and height of the object after it was resized. (You can also use event.layerX and event.layerY, which do the same thing.)
Wat bedoelen ze precies met het vet gedrukte?

edit: Bron: http://www.elated.com/tut...amming/javascript/events/

[ Voor 18% gewijzigd door intermusic op 02-02-2006 22:33 ]

[crisp]

intermusic schreef op donderdag 02 februari 2006 @ 22:30:
Misschien een dom probeersel maar,

Java:

document.getElementById("divid").event.x

werkt ook niet.

Een event is een object dat doorgegeven wordt aan een event-handler. In IE is het event een global object (window.event), in echte browsers wordt het als parameter doorgegeven aan de handler - bekijk mijn voorbeeld nog maar eens goed...

[intermusic]

frickY schreef op donderdag 02 februari 2006 @ 21:58:
Je weet dat je ook kunt afvangen hoever een pagina is gescrollt? Als je de exacte positie van je DIV weet, welke je volgens mij ook kunt bepalen met javascript, kun je dat bij elkaar optellen.

Dat is het antwoord!
Gewoon het aantal gescrollde pixels optellen bij het aantal wat uit de y positie komt:

Java:

mousecoor(window.event.y) + document.body.scrollTop

Thanks you all!

[crisp]

intermusic schreef op donderdag 02 februari 2006 @ 22:44:
[...]


Dat is het antwoord!
Gewoon het aantal gescrollde pixels optellen bij het aantal wat uit de y positie komt:

Java:

mousecoor(window.event.y) + document.body.scrollTop

Thanks you all!

only in IE...

[BtM909]

intermusic schreef op donderdag 02 februari 2006 @ 22:44:
[...]


Dat is het antwoord!
Gewoon het aantal gescrollde pixels optellen bij het aantal wat uit de y positie komt:

Java:

mousecoor(window.event.y) + document.body.scrollTop

Thanks you all!

Kijk nou eens goed naar het voorbeeld van crisp.... Hoe meer werkend (lees: crossbrowser) wil je het krijgen

[SuperRembo]

crisp schreef op donderdag 02 februari 2006 @ 21:58:

JavaScript:

document.getElementById('divid').onmousemove = handler;

function handler(e)
{
    e = e || window.event;

    var mousex = e.layerX || e.x || e.offsetX;
    var mousey = e.layerY || e.y || e.offsetY;
}

works for me...

Ik had gedacht dat dat mis zou gaan als je met de muis helemaal links of helemaal boven zou komen , omdat dan x of y dan 0 zou worden. Maar wat blijkt: de linker bovenhoek is 1:1, niet 0:0. Wel vreemd eigenlijk.