CodeAPI

MouseEvent

Event that is fired when the mouse is clicked.

The properties of a MouseEvent refer to the client, page, and screen. These terms refer to different containers as shown in the diagrams below.

Table of Contents

PROPERTIES

?
Store values associated with an object.
clientX

Gets the distance in pixels between the mouse pointer and the left edge of the browser's viewable area.

clientY

Gets the distance in pixels between the mouse pointer and the top edge of the browser's viewable area.

contextGets the context of the event on a repeated element.
offsetX

Gets the distance in pixels between the mouse pointer and the left edge of the element that triggered this event.

offsetY

Gets the distance in pixels between the mouse pointer and the top edge of the element that triggered this event.

pageX

Gets the distance in pixels between the mouse pointer and the left edge of the page.

pageY

Gets the distance in pixels between the mouse pointer and the top edge of the page.

screenX

Gets the distance in pixels between the mouse pointer and the left edge of the screen or screens.

screenY

Gets the distance in pixels between the mouse pointer and the top edge of the screen or screens.

targetGets the element that the event was fired on.
typeGets the type of event that was fired.

MIXES IN

?
Where some functionality is inherited from.
$w.Event

clientX

Gets the distance in pixels between the mouse pointer and the left edge of the browser's viewable area.

Description

The browser's viewable area refers to the viewable contents of the page and excludes elements such as a sidebar and scrollbar. Therefore, two clicks on the same physical point of the screen return the same clientX values even if the page is scrolled horizontally in the meantime. But two clicks on the same point on the page return different clientX values if the page is scrolled horizontally in the meantime.

Syntax

get clientX(): number
TYPE
?
The kind of data the property stores.
number

Examples

Get a mouse click's coordinates

$w("#myElement").onClick( (event) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

clientY

Gets the distance in pixels between the mouse pointer and the top edge of the browser's viewable area.

Description

The browser's viewable area refers to the viewable contents of the page and excludes elements such as a toolbar and scrollbar. Therefore, two clicks on the same physical point of the screen return the same clientY values if the page is scrolled vertically in the meantime. But two clicks on the same point on the page return different clientY values if the page is scrolled vertically in the meantime.

Syntax

get clientY(): number
TYPE
?
The kind of data the property stores.
number

Examples

Get a mouse click's coordinates

$w("#myElement").onClick( (event) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

context

Gets the context of the event on a repeated element.

Description

An event's context contains information about the circumstances surrounding the firing of the event. The context property only appears in events on repeated elements.

You can use the evnet context with $w.at() to get a selector function which selects items from a specific repeater item. It contains an object with one key:value pair. The key is "itemId" and the value is the ID of the repeated item on which the event occurred.

Syntax

get context(): EventContext

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Event

Examples

Get the context of the event

// non-repeater event

$w("#myElement").onEvent( (event) => {
  let type = event.context.type; // "GLOBAL_SCOPE"
} );


// repeater event

$w("#myRepeatedElement").onEvent( (event) => {
  let $item = $w.at(event.context)
  $item("#anotherRepeatedElement").value = "new value";

  let itemId = event.context.itemId;  // "item1"
} );

offsetX

Gets the distance in pixels between the mouse pointer and the left edge of the element that triggered this event.

Description

Scrolling the web page causes its elements to shift relative to the browser window. Therefore, two clicks on the same physical point of the screen return different offsetX values if the page is scrolled horizontally in the meantime. But two clicks on the same point on the element return the same offsetX values even if the page is scrolled horizontally in the meantime.

Syntax

get offsetX(): number
TYPE
?
The kind of data the property stores.
number

Examples

Get a mouse click's coordinates

$w("#myElement").onClick( (event) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

offsetY

Gets the distance in pixels between the mouse pointer and the top edge of the element that triggered this event.

Description

Scrolling the web page causes its elements to shift relative to the browser window. Therefore, two clicks on the same physical point of the screen return different offsetY values if the page is scrolled vertically in the meantime. But two clicks on the same point on the element return the same offsetY values even if the page is scrolled horizontally in the meantime.

Syntax

get offsetY(): number
TYPE
?
The kind of data the property stores.
number

Examples

Get a mouse click's coordinates

$w("#myElement").onClick( (event) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

pageX

Gets the distance in pixels between the mouse pointer and the left edge of the page.

Description

The page refers to the entire web page, even parts that are not currently viewable in the browser. Therefore, two clicks on the same physical point of the screen return different pageX values if the page is scrolled horizontally in the meantime. But two clicks on the same point on the page return the same pageX values even if the page is scrolled horizontally in the meantime.

Syntax

get pageX(): number
TYPE
?
The kind of data the property stores.
number

Examples

Get a mouse click's coordinates

$w("#myElement").onClick( (event) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

pageY

Gets the distance in pixels between the mouse pointer and the top edge of the page.

Description

The page refers to the entire web page, even parts that are not currently viewable in the browser. Therefore, two clicks on the same physical point of the screen return different pageY values if the page is scrolled vertically in the meantime. But two clicks on the same point on the page return the same pageY values even if the page is scrolled vertically in the meantime.

Syntax

get pageY(): number
TYPE
?
The kind of data the property stores.
number

Examples

Get a mouse click's coordinates

$w("#myElement").onClick( (event) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

screenX

Gets the distance in pixels between the mouse pointer and the left edge of the screen or screens.

Description

The screen refers to the physical screen or screens. Therefore, two clicks on the same physical point of the screen return the same screenX values even if the page is scrolled horizontally in the meantime. But two clicks on the same point on the page return different screenX values if the page is scrolled horizontally in the meantime.

Syntax

get screenX(): number
TYPE
?
The kind of data the property stores.
number

Examples

Get a mouse click's coordinates

$w("#myElement").onClick( (event) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

screenY

Gets the distance in pixels between the mouse pointer and the top edge of the screen or screens.

Description

The screen refers to the physical screen or screens. Therefore, two clicks on the same physical point of the screen return the same screenY values if the page is scrolled vertically in the meantime. But two clicks on the same point on the page return different screenY values if the page is scrolled vertically in the meantime.

Syntax

get screenY(): number
TYPE
?
The kind of data the property stores.
number

Examples

Get a mouse click's coordinates

$w("#myElement").onClick( (event) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

target

Gets the element that the event was fired on.

Note

When using the target to get the value of a text input or text box in an onKeyPress event handler, you may receive the value of the element before the key was pressed. To get the text input or text box's updated value, use the updatedTargetValue property of the event handler's event parameter.

Syntax

get target(): Element
TYPE
?
The kind of data the property stores.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Event

Examples

Get the ID of the target element

$w("#myElement").onEvent( (event) => {
  let targetId = event.target.id;  // "myElement"
} );

type

Gets the type of event that was fired.

Syntax

get type(): string
TYPE
?
The kind of data the property stores.
string

MIXED IN FROM

?
Where this functionality is inherited from.
$w.Event

Examples

Get the type of the event

$w("#myElement").onEvent( (event) => {
  let eventType = event.type; // "click"
} );