[js] DOM2 positie binnen een element - Softwareontwikkeling

zaterdag 11 maart 2006 11:17

Acties:

Verwijderd

Topicstarter

Ik dacht dat heel simpel was, maar het valt toch tegen. Ik wil de muispositie terugkrijgen ten opzichte van de positie van het element waar ik in zit. En wel volgens de DOM 2 spec, want ik ben bezig met js in een svg element, en daar lijkt het allemaal wat stricter te zijn.

zo krijg ik bijvoorbeeld niets terug uit event.x en event.y (in opera wel, maar hetzelfde als screenX en -Y). screenX en -Y geven wel wat terug, maar heb ik uiteraard niets aan. clientX en -Y ook, maar dat is tov van de hele client. Ik dacht daar even offsetLeft cq offsetTop vanaf te trekken, maar ook die zijn niet gedefinieerd (voor een svg element).

pageX en -Y geven hetzelfde als clientX en -Y

stukje code voor de liefhebbers:

code:

<body>
<svg:svg width="400px" height="400px" viewBox="0 0 400 400" version="1.1" xmlns:svg="http://www.w3.org/2000/svg">
    <svg:rect id="rect" x="0" y="0" width="400" height="400" fill="white" stroke="black"/>
    <svg:script type="text/javascript">
        document.getElementById('rect').onmousemove = function(e) {
            window.status = e.x + ' ' + e.clientX + ' ' + e.pageX + ' ' + e.screenX;
        }
    </svg:script>
</svg:svg>
</body>

(alleen in Fx 1.5 en Opera 9)

edit: layerX en -Y geven het goede resultaat in Fx, maar niet in Opera (het is ook geen DOM2)

[ Voor 30% gewijzigd door Verwijderd op 11-03-2006 11:30 ]

zaterdag 11 maart 2006 11:38

Acties:

T-MOB

Voor Opera zou je offsetX en -Y kunnen proberen.

Regeren is vooruitschuiven

zaterdag 11 maart 2006 11:43

Acties:

crisp

Devver

Pixelated

offsetX zou volgens mij moeten werken in Opera.
Als alternatief zou je je SVG element nog kunnen wrappen in een HTML element waarvan je wel de positie binnen het document kan achterhalen en met clientX werken

Intentionally left blank

zaterdag 11 maart 2006 11:55

Acties:

Verwijderd

Topicstarter

offsetX werkt niet in opera, clientX wel, maar dat geeft tov van de paginarand.

een HTML wrapper maakt in opera niks uit, in Fx levert me het een offsetLeft op die wel werkt, maar daar had ik het al opgelost met layerX

samenvattig:
opera:
obj.offsetX - undefined
obj.offsetLeft - 0 (altijd)
event.layerX - undefined
event.x - muis tov pagina
event.clientX - muis tov pagina
event.pageX - muis tov pagina
event.screenX - muis tov screen

Fx
obj.offsetX - undefined
obj.offsetLeft - undefined bij svg element, werkt bij html element
event.layerX - muis tov element
event.x - undefined
event.clientX - muis tov pagina
event.pageX - muis tov pagina
event.screenX - muis tov screen

overigens alles in een XML DOM uiteraard

zaterdag 11 maart 2006 12:00

Acties:

crisp

Devver

Pixelated

Lijkt me een lelijke tekortkoming als de offset* properties niet meer werken in Opera. Ik zal zo eens kijken of dat ligt aan het feit dat je met een XML DOM werkt of niet, want in HTML werken ze vziw gewoon (welke versie Opera test je overigens in?).
Als het echt stuque is zou je Anne van Kesteren eens een mailtje kunnen sturen

Intentionally left blank

zaterdag 11 maart 2006 12:24

Acties:

Verwijderd

Topicstarter

ik zit te testen in de weekly builds van opera 9. Eerder ondersteunt sowieso geen javascript in svg.

maar ik zat ook verkeerd te kijken. Had ergens in m'n hoofd dat offsetLeft cumulatief was, maar het is gewoon de offset tov de parent.

Dat wordt dus optellen in Opera denk ik

zal anne op zitten te wachten op die mailtjes

kan je beter meteen naar het desktopteam sturen

[ Voor 17% gewijzigd door Verwijderd op 11-03-2006 12:24 ]

zaterdag 11 maart 2006 12:33

Acties:

crisp

Devver

Pixelated

Inderdaad; offsetLeft en offsetTop werken gewoon in Opera; je moet dat in een loopje inderdaad optellen samen met de offset properties voor de offsetParents.
In HTML krijg je gewoon offsetX als event property in Opera - en dat is verder de enige property die de muispositie t.o.v het element geeft; die ontbreekt voor SVG elementen.

Ik gebruik vaak dergelijke constructies voor debugging:

JavaScript:

var s = '';
for (var prop in e)
{
    if (typeof e[prop] != 'object' && typeof e[prop] != 'function')
        s += prop + ': ' + e[prop] + '\n';
}
document.getElementById('eventprops').value = s;

Zo heb je in 1 keer een overzicht van de beschikbare properties

Intentionally left blank

zaterdag 11 maart 2006 12:35

Acties:

crisp

Devver

Pixelated

Note overigens dat offset*-properties geen gestandaardiseerde properties zijn in het DOM event model. In fact kent het DOM event model geen properties voor muispositie relatief t.o.v. het element waarop het event plaatsvind

(enkel screenX/Y en clientX/Y zijn gedefinieerd)

[ Voor 10% gewijzigd door crisp op 11-03-2006 12:37 ]

Intentionally left blank

zaterdag 11 maart 2006 13:06

Acties:

Verwijderd

Topicstarter

ja idd, daarom vroeg ik me ook af hoe ik het netjes met DOM2 op kan lossen, aangezien ik in svg zit en er in principe voor (toekomstige) svg parsers geen enkele reden is om non DOM2 properties te implementeren

Pagina: 1

Reageer