Welcome to the CSDN-markdown Editor, csdn-markdown

Welcome to the CSDN-markdown Editor, csdn-markdown
Difference between clientX/clientY and screenX/screenY

In JavaScript, we sometimes need to get the cursor position for some special processing. In this case, the MouseEvent object is used. The MouseEvent object provides two sets of attributes to locate the mouse position: clientX/clientY and screenX/screenY. In addition to these two sets of attributes, we often use pageX, pageY, and offsetX/offsetY to locate the mouse. What are their similarities and differences.

Attribute description

• ClientX/clientY

  Name	Description	Return
  ClientX	When an event is returnedElement ViewX coordinate	Value
  ClientY	When an event is returnedElement ViewY coordinate	Value

  In fact, the element view represents the browser. clientX represents the distance between the mouse and the left border of the browser, and clientY represents the distance between the mouse and the border on the browser.

• ScreenX/screenY

  Name	Description	Return
  ScreenX	When an event is returnedScreenX coordinate	Value
  ScreenY	When an event is returnedScreenY coordinate	Value

  As the name suggests, screenX is the distance between the mouse and the left border of the screen, while screenY is the distance between the mouse and the border on the screen.

• PageX/pageY

  Name	Description	Return
  PageX	When an event is returnedDocumentX coordinate	Value
  PageY	When an event is returnedDocumentY coordinate	Value

  The so-called document can be simply understood as the page content in the browser. pageX is the distance between the mouse and the left side of the document, and pageY is the distance between the mouse and the top side of the document. If we hover the mouse over the middle of the browser, if you scroll through the browser, pageY remains unchanged even if you do not move the mouse, because the distance relative to the top of the document remains unchanged.

• OffsetX/offsetY

  Name	Description	Return
  PageX	When an event is returnedEvent pointing ElementX coordinate	Value
  PageY	When an event is returnedEvent pointing ElementY coordinate	Value

  Assume there is an element<p>test</p>When the mouse enters the element to trigger the event, offsetX indicates the distance from the mouse to the left of the P element.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.