Mouse events and the difference clientX, offsetX, screenX, pageX, x's

 

 

 

 

Mouse Events

Below these types of mouse events:

1. onclick

Mouse click events

box.onclick = function(e){
    console.log(e)
}

• 1
• 2
• 3

2. onmousedown

Mouse down event

box.onmousedown = function(e){
    console.log(e)
}

• 1
• 2
• 3

3. onmouseup

Release the mouse event

box.onmouseup = function(e){
    console.log(e)
}

• 1
• 2
• 3

4. onmousemove

Mouse motion events

box.onmousemove = function(e){
    console.log(e)
}

• 1
• 2
• 3

5. onmouseover

Rollover events

box.onmouseover = function(e){
    console.log(e)
}

• 1
• 2
• 3

6. onMouseOut

Mouse events to draw

box.onmouseout = function(e){
    console.log(e)
}

• 1
• 2
• 3

The information printed e above, approximately:

It can be found on mouse events (MouseEvent):
       which contains many of the coordinates and the coordinates of the meaning of each is different. Let us introduce common coordinate one by one, and their meanings.

A, clientX, clientY

From the current click position x body visible region, y coordinates

Two, pageX, pageY

For the entire page, including the length of the body portion to the volume of

三、screenX、screenY

Click on the location from the computer screen of the current x, y coordinates

Four, offsetX, offsetY

Relative to the parent box positioned with x, y coordinates

Five, x, y

And screenX, screenY as

as the picture shows: