Welcome to the Csdn-markdown Editor

The difference between Clientx/clienty and Screenx/screeny

There are times in JavaScript where we need to get the mouse hover position to do some special processing. The MouseEvent object needs to be used. The MouseEvent object provides two sets of properties for locating the position of the mouse: Clientx/clienty and Screenx/screeny. In addition to these two sets of properties we often use Pagex/pagey and offsetx/offsety these two sets of properties are also used to locate the mouse, then what are their similarities and differences?

Property Description

• Clientx/clienty

  name	Description	return
  ClientX	Returns the x-coordinate of the mouse relative to the element viewport When the event is triggered	Numerical
  ClientY	Returns the y-coordinate of the mouse relative to the element viewport When the event is triggered	Numerical

  The element viewport here actually refers to the browser, Clientx is the mouse distance from the left side of the browser, Clienty is the distance of the mouse from the border of the browser.

• screenx/screeny

  name	description	return
  ScreenX	returns the x-coordinate of the mouse relative to screen When the event is triggered	value
  ScreenY	Returns the y-coordinate of the mouse relative to screen When the event is triggered	value

  As the name implies, Screenx is the distance between the mouse and the left border of the display screen, and Screeny is the distance from the top of the monitor screen.

• pagex/pagey

  /tr>

  name	description	return
  PageX	returns the x-coordinate of the mouse relative to document When the event is triggered	value
  pagey	Returns the y-coordinate of the mouse relative to document When the event is triggered	value

  The so-called document can be easily understood as the content of the page in the browser, Pagex is the mouse distance from the left side of the document, Pagey is the distance of the mouse from the top side of the document, if we hover the mouse over the browser In the middle, scrolling through the browser through the scroll wheel, the pagey is always changing, although there is no position to move the mouse, because the distance relative to the top of the document is changing.

• Offsetx/offsety

  name	Description	return
  PageX	Returns the x-coordinate of the mouse pointer to an element when the event is triggered	Numerical
  Pagey	Returns the y-coordinate of the mouse pointer to the element when the event is triggered	Numerical

  Suppose there is an element <p>test</p> when the mouse enters the element to trigger an event, which is offsetx refers to the distance from the left side of the mouse to the P element.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Welcome to the Csdn-markdown Editor