MouseEvent clientX-eigenschap

DOM events MouseEvent

Definitie en gebruik

Wanneer een muisgebeurtenis wordt geactiveerd, retourneert de clientX-eigenschap de horizontale coordinaat van de muispunt (op basis van het clientgebied).

Het clientgebied is het huidige venster.

Tip:Om de verticale coordinaat van de muispunt (op basis van het clientgebied) te verkrijgen, gebruik dan clientY property.

Opmerking:Deze eigenschap is alleen leesbaar.

Voorbeeld

Voorbeeld 1

Voer de coordinaat van de muispunt uit wanneer de muisknop op het element wordt ingedrukt:

var x = event.clientX;     // Verkrijg de horizontale coordinaat
var y = event.clientY;     // Verkrijg de verticale coordinaat
var coor = "X coordinaat: " + x + ", Y coordinaat: " + y;

Probeer het zelf

Voorbeeld 2

Voer de coordinaat van de muispunt uit wanneer de muispunt over het element beweegt:

var x = event.clientX;
var y = event.clientY; 
var coor = "X coordinaat: " + x + ", Y coordinaat: " + y;
document.getElementById("demo").innerHTML = coor;

Probeer het zelf

Voorbeeld 3

Demonstreer het verschil tussen clientX en clientY en screenX en screenY:

var cX = event.clientX;
var sX = event.screenX;
var cY = event.clientY;
var sY = event.screenY;
var coords1 = "client - X: " + cX + ", Y coordinaat: " + cY;
var coords2 = "screen - X: " + sX + ", Y coordinaat: " + sY;

Probeer het zelf

Syntax

event.clientX

Technische details

Retourwaarde: Numerieke waarde die de horizontale coordinaat van de muispunt aangeeft, uitgedrukt in pixels.
DOM versie: DOM Level 2 Events

Browserondersteuning

Eigenschappen Chrome IE Firefox Safari Opera
clientX Support Support Support Support Support

Related pages

HTML DOM reference manual:clientY property of MouseEvent

HTML DOM reference manual:screenX property of MouseEvent

HTML DOM reference manual:screenY property of MouseEvent

HTML DOM reference manual:offsetX property of MouseEvent

HTML DOM reference manual:offsetY property of MouseEvent

DOM events MouseEvent