A graph can easily understand the differences among clientX, offsetX, screenX, pageX, and offsetxscreenx of javascript event objects.

A graph can easily understand the differences among clientX, offsetX, screenX, pageX, and offsetxscreenx of javascript event objects.

It is always dizzy by the clientX, offsetX, screenX, and pageX of the javascript event object, so I decided to make a picture to distinguish it. (It makes my hand sour ....)

First, summarize the differences:

Event. clientX, event. clientY

Relative to the X and Y coordinates (window coordinates) of the visible area of the browser window, the visible area does not include the toolbar and scroll bar. Both the IE event and standard event define these two attributes.

Event. pageX, event. pageY

Similar to event. clientX and event. clientY, but they use document coordinates rather than window coordinates. These two attributes are not standard attributes, but are widely supported. The IE event does not have these two attributes.

Event. offsetX, event. offsetY

Compared with the X and Y coordinates of the event Source Element (srcElement), only the IE event has these two attributes, and the standard event has no corresponding attributes.

Event. screenX, event. screenY

The cursor is relative to the X and Y coordinates in the upper left corner of the screen. Both standard events and IE events define these two attributes.

!!!!

What are the specific functions of javascript event objects?

The event object is valid only when an event occurs (for example, when you click the mouse or press the keyboard ).
The event object is used to indicate the event status,
For example
Elements that trigger the event object (event. srcElement ),
Location of the mouse (event. clientX, event. clientY ),
Press the key (event. keyCode) and so on.

The attributes of the event object include:
AltKey, button, Member, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, delimiter, srcElement, srcFilter, toElement, type, x, y (you can view reference books in detail)

How to Use event:

Definition
Var evt = window. event;
FF cannot get the event object through this method, you can pass the value method:
Element. onclick = function (e ){
Var evt = window. event | e;
...
}

Use event to get the coordinates of the mouse when you click
Element. onclick = function (e ){
Var evt = window. event | e;
Var cursorPOS = {
X: evt. clientX,
Y: clientY
}
}

Use the event object to specify a warning box when you press the Enter key.
Element. onkeydown = function (e ){
Var evt = window. event | e;
If (evt. keyCode = 13 ){
Alert ('press Enter! ');
}
}

Use event to get the DOM object clicked by the mouse
Document. onclick = function (e ){
Var evt = window. event | e;
Var _ target = evt. srcElement | evt.tar get;
Alert (_ target. tagName)
}

For more information, see the teaching materials.

EventclientX in javascript

You can directly write event. X