MouseEvent pageX-eigenschap

DOM events MouseEvent

Definitie en gebruik

Wanneer een muisgebeurtenis wordt geactiveerd, retourneert de pageX-eigenschap de horizontale coördinaat van de muispunt (relatief ten opzichte van het document).

Document is de webpagina.

Tip:Gebruik pageY-eigenschap.

Opmerking:Deze eigenschap is alleen leesbaar.

Opmerking:Deze eigenschap is niet standaard, maar wordt ondersteund door de meeste belangrijke browsers.

Voorbeeld

Voorbeeld 1

Geef de coördinaten van de muispunt weer bij het klikken op de muisknop op het element:

var x = event.pageX;     // Verkrijg de horizontale coördinaat
var y = event.pageY;     // Verkrijg de verticale coördinaat
var coor = "X coords: " + x + ", Y coords: " + y;

Probeer het zelf

Voorbeeld 2

Geef de coördinaten van de muispunt bij het bewegen over het element weer:

var x = event.pageX;
var y = event.pageY; 
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;

Probeer het zelf

Voorbeeld 3

Demonstratie van het verschil tussen pageX en pageY en screenX en screenY:

var pX = event.screenX;
var cX = event.pageX;
var pY = event.screenY;
var cY = event.pageY;
var coords1 = "page - X: " + pX + ", Y coords: " + pY;
var coords2 = "screen - X: " + cX + ", Y coords: " + cY;

Probeer het zelf

Syntax

event.pageX

Technische details

Retourwaarde: Getal, dat de horizontale coördinaat van de muispunt in pixels aangeeft.
DOM versie: Geen.

Browserondersteuning

Eigenschappen Chrome IE Firefox Safari Opera
pageX Support 12.0 Support Support Support

Related pages

HTML DOM reference manual:MouseEvent pageY attribute

HTML DOM reference manual:MouseEvent clientX attribute

HTML DOM reference manual:MouseEvent clientY attribute

HTML DOM reference manual:MouseEvent screenX attribute

HTML DOM reference manual:MouseEvent screenY attribute

DOM events MouseEvent