Home > Web Front-end > JS Tutorial > clientX,pageX,offsetX,x,layerX,screenX,offsetLeft difference analysis_javascript skills

clientX,pageX,offsetX,x,layerX,screenX,offsetLeft difference analysis_javascript skills

WBOY
Release: 2016-05-16 18:32:30
Original
1023 people have browsed it

screenX: The coordinates of the mouse on the display screen.
clientX: The coordinates of the mouse in the page display area.
Note: The above two are common to all browsers.

pageX: Unique to FF, the position of the mouse on the page starts from the upper left corner of the page. This can be easily positioned on the entire page. IE has no directly replaced attribute.
Layer If the element has a border, the coordinate origin is at the upper left corner of the border, not the upper left corner of the content area.
offsetX: Unique to IE, the position of the mouse relative to the "element that triggered the event" is positioned from the upper left corner of the content area, not from the upper left corner of the border! This attribute is relatively easy to use. It is very convenient to determine where the mouse point is in an element. FF does not have a direct replacement attribute.
x: Unique to IE, it has the same effect as layerX and can be used as a direct replacement attribute of layerX.
Note: There is a 1px difference in the positioning of IE and FF. In fact, the positioning of IE starts from 0, and the positioning of FF starts from 1. FF will always be 1px larger than IE, and it needs to be processed according to the actual situation.

offsetLeft: This attribute is not an attribute of the event object, but belongs to the DOM object. This attribute indicates that the DOM object is closest to the object in the hierarchical relationship of the DOM object, and the parent of the position is set. "Object", although this is said, the effect is different in different browsers. In FF, the above instructions are strictly followed, but in IE6/7, this property returns the position of the DOM object in its direct parent object. Position, but IE8 corrected this problem, but IE8 has a new problem. Other browsers start positioning from the upper left corner of the content area of ​​the parent object, but IE8 does start positioning from the upper left corner of the border of the parent element. Since the test environment is IE8 in IETester, it cannot be ruled out that it is a problem with IETester.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template