The position of mouse event in JavaScript (clientX, layerX, x, offsetX, etc.)

The event object in JavaScript has a total of six pairs of mouse position attributes. They are as follows:

Attributes to reference points Browser compatibility

clientX, clientY Browser window all

layerX, layerY

The nearest absolutely positioned parent node, if not, the document Firefox, Chrome, Safari

offsetX, offsetY All event target objects, except Firefox

pageX, pageY document objects, except IE

ScreenX, ScreenY All computer screens

x,y Try not to use it, the compatibility is poor with IE9 and below