[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 321
  • Last Modified:

Event.clientx, e.clientx


I just want to know, what is the difference between Event.clientx and e.clientx.

1 Solution
Whenever an event fires, the computer places appropriate data about the event into the event object - for example, where the mouse pointer was on the screen at the time of the event, which mouse buttons were being pressed at the time of the event, and other useful information.
After we know what caused the event, and what the event is, another set of very useful properties report the position of the mouse pointer when the event happened. These properties contain the mouse co-ordinates when the event was triggered.

(clientX, clientY) returns the position of the mouse pointer on the document, and (offsetX, offsetY) returns the position of the mouse pointer on the element.

An enhanced cursor involves attaching an element to the cursor.

<TITLE>Enhanced Cursor</TITLE>
<BODY onmousemove="enhancecursor();" >
<DIV ID="cursorplus" style="position:absolute;top:10;left:10;height:20;width:20;background-color:red"></DIV>
function enhancecursor() {

e.client x just means that inside a function you must've passed the event which is being refernced as e
for ex on a table/layer u might've called a function on the mouse down ebvent like onMouseDown="drag(event, this)"
in the drag function i might've something like
function drag(e, theBar){
  thePanel = theBar.parentNode;
  sX = e.clientX
  sY = e.clientY


Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now