$w.MouseEvent

$w.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. Coodinate Reference Coodinate Reference Coodinate Reference

Mixes In

$w.Event

Contents

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.
context Gets 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.
target Gets the element that the event was fired on.
type Gets the type of event that was fired.
clientX

clientX

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

Syntax

get clientX(): Number

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 will 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 will return different clientX values if the page is scrolled horizontally in the meantime. Coodinate Reference

Type

Number

Examples

Get a mouse click's coordinates

JHcoIiNteUVsZW1lbnQiKS5vbkNsaWNrKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGNsaWVudFggPSBldmVudC5jbGllbnRYOyAgLy8gMzYyCiAgbGV0IGNsaWVudFkgPSBldmVudC5jbGllbnRZOyAgLy8gMjQ0CiAgbGV0IG9mZnNldFggPSBldmVudC5vZmZzZXRYOyAgLy8gMTAKICBsZXQgb2Zmc2V0WSA9IGV2ZW50Lm9mZnNldFk7ICAvLyAxMgogIGxldCBwYWdlWCA9IGV2ZW50LnBhZ2VYOyAgICAgIC8vIDM2MgogIGxldCBwYWdlWSA9IGV2ZW50LnBhZ2VZOyAgICAgIC8vIDM3NgogIGxldCBzY3JlZW5YID0gZXZlbnQuc2NyZWVuWDsgIC8vIDM4OTcKICBsZXQgc2NyZWVuWSA9IGV2ZW50LnNjcmVlblk7ICAvLyAzNjIKfSApOwo=
$w("#myElement").onClick( (event, $w) => {
  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

clientY

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

Syntax

get clientY(): Number

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 will return the same clientY values if the page is scrolled vertically in the meantime. But two clicks on the same point on the page will return different clientY values if the page is scrolled vertically in the meantime. Coodinate Reference

Type

Number

Examples

Get a mouse click's coordinates

JHcoIiNteUVsZW1lbnQiKS5vbkNsaWNrKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGNsaWVudFggPSBldmVudC5jbGllbnRYOyAgLy8gMzYyCiAgbGV0IGNsaWVudFkgPSBldmVudC5jbGllbnRZOyAgLy8gMjQ0CiAgbGV0IG9mZnNldFggPSBldmVudC5vZmZzZXRYOyAgLy8gMTAKICBsZXQgb2Zmc2V0WSA9IGV2ZW50Lm9mZnNldFk7ICAvLyAxMgogIGxldCBwYWdlWCA9IGV2ZW50LnBhZ2VYOyAgICAgIC8vIDM2MgogIGxldCBwYWdlWSA9IGV2ZW50LnBhZ2VZOyAgICAgIC8vIDM3NgogIGxldCBzY3JlZW5YID0gZXZlbnQuc2NyZWVuWDsgIC8vIDM4OTcKICBsZXQgc2NyZWVuWSA9IGV2ZW50LnNjcmVlblk7ICAvLyAzNjIKfSApOwo=
$w("#myElement").onClick( (event, $w) => {
  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

context

Gets the context of the event on a repeated element.

Syntax

get context(): Object

Description

The context property only appears in events on repeated elements.

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.

Type

Object

Examples

Get the context of the event

JHcoIiNteVJlcGVhdGVkRWxlbWVudCIpLm9uRXZlbnQoIChldmVudCwgJHcpID0+IHsKICBsZXQgaXRlbUlkID0gZXZlbnQuY29udGV4dC5pdGVtSWQ7ICAvLyAiaXRlbTEiCn0gKTsK
$w("#myRepeatedElement").onEvent( (event, $w) => {
  let itemId = event.context.itemId;  // "item1"
} );

Mixed In From

$w.Event

offsetX

offsetX

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

Syntax

get offsetX(): Number

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 will return different offsetX values if the page is scrolled horizontally in the meantime. But two clicks on the same point on the element will return the same offsetX values even if the page is scrolled horizontally in the meantime.

Type

Number

Examples

Get a mouse click's coordinates

JHcoIiNteUVsZW1lbnQiKS5vbkNsaWNrKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGNsaWVudFggPSBldmVudC5jbGllbnRYOyAgLy8gMzYyCiAgbGV0IGNsaWVudFkgPSBldmVudC5jbGllbnRZOyAgLy8gMjQ0CiAgbGV0IG9mZnNldFggPSBldmVudC5vZmZzZXRYOyAgLy8gMTAKICBsZXQgb2Zmc2V0WSA9IGV2ZW50Lm9mZnNldFk7ICAvLyAxMgogIGxldCBwYWdlWCA9IGV2ZW50LnBhZ2VYOyAgICAgIC8vIDM2MgogIGxldCBwYWdlWSA9IGV2ZW50LnBhZ2VZOyAgICAgIC8vIDM3NgogIGxldCBzY3JlZW5YID0gZXZlbnQuc2NyZWVuWDsgIC8vIDM4OTcKICBsZXQgc2NyZWVuWSA9IGV2ZW50LnNjcmVlblk7ICAvLyAzNjIKfSApOwo=
$w("#myElement").onClick( (event, $w) => {
  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

offsetY

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

Syntax

get offsetY(): Number

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 will return different offsetY values if the page is scrolled vertically in the meantime. But two clicks on the same point on the element will return the same offsetY values even if the page is scrolled horizontally in the meantime.

Type

Number

Examples

Get a mouse click's coordinates

JHcoIiNteUVsZW1lbnQiKS5vbkNsaWNrKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGNsaWVudFggPSBldmVudC5jbGllbnRYOyAgLy8gMzYyCiAgbGV0IGNsaWVudFkgPSBldmVudC5jbGllbnRZOyAgLy8gMjQ0CiAgbGV0IG9mZnNldFggPSBldmVudC5vZmZzZXRYOyAgLy8gMTAKICBsZXQgb2Zmc2V0WSA9IGV2ZW50Lm9mZnNldFk7ICAvLyAxMgogIGxldCBwYWdlWCA9IGV2ZW50LnBhZ2VYOyAgICAgIC8vIDM2MgogIGxldCBwYWdlWSA9IGV2ZW50LnBhZ2VZOyAgICAgIC8vIDM3NgogIGxldCBzY3JlZW5YID0gZXZlbnQuc2NyZWVuWDsgIC8vIDM4OTcKICBsZXQgc2NyZWVuWSA9IGV2ZW50LnNjcmVlblk7ICAvLyAzNjIKfSApOwo=
$w("#myElement").onClick( (event, $w) => {
  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

pageX

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

Syntax

get pageX(): Number

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 will return different pageX values if the page is scrolled horizontally in the meantime. But two clicks on the same point on the page will return the same pageX values even if the page is scrolled horizontally in the meantime. Coodinate Reference

Type

Number

Examples

Get a mouse click's coordinates

JHcoIiNteUVsZW1lbnQiKS5vbkNsaWNrKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGNsaWVudFggPSBldmVudC5jbGllbnRYOyAgLy8gMzYyCiAgbGV0IGNsaWVudFkgPSBldmVudC5jbGllbnRZOyAgLy8gMjQ0CiAgbGV0IG9mZnNldFggPSBldmVudC5vZmZzZXRYOyAgLy8gMTAKICBsZXQgb2Zmc2V0WSA9IGV2ZW50Lm9mZnNldFk7ICAvLyAxMgogIGxldCBwYWdlWCA9IGV2ZW50LnBhZ2VYOyAgICAgIC8vIDM2MgogIGxldCBwYWdlWSA9IGV2ZW50LnBhZ2VZOyAgICAgIC8vIDM3NgogIGxldCBzY3JlZW5YID0gZXZlbnQuc2NyZWVuWDsgIC8vIDM4OTcKICBsZXQgc2NyZWVuWSA9IGV2ZW50LnNjcmVlblk7ICAvLyAzNjIKfSApOwo=
$w("#myElement").onClick( (event, $w) => {
  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

pageY

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

Syntax

get pageY(): Number

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 will return different pageY values if the page is scrolled vertically in the meantime. But two clicks on the same point on the page will return the same pageY values even if the page is scrolled vertically in the meantime. Coodinate Reference

Type

Number

Examples

Get a mouse click's coordinates

JHcoIiNteUVsZW1lbnQiKS5vbkNsaWNrKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGNsaWVudFggPSBldmVudC5jbGllbnRYOyAgLy8gMzYyCiAgbGV0IGNsaWVudFkgPSBldmVudC5jbGllbnRZOyAgLy8gMjQ0CiAgbGV0IG9mZnNldFggPSBldmVudC5vZmZzZXRYOyAgLy8gMTAKICBsZXQgb2Zmc2V0WSA9IGV2ZW50Lm9mZnNldFk7ICAvLyAxMgogIGxldCBwYWdlWCA9IGV2ZW50LnBhZ2VYOyAgICAgIC8vIDM2MgogIGxldCBwYWdlWSA9IGV2ZW50LnBhZ2VZOyAgICAgIC8vIDM3NgogIGxldCBzY3JlZW5YID0gZXZlbnQuc2NyZWVuWDsgIC8vIDM4OTcKICBsZXQgc2NyZWVuWSA9IGV2ZW50LnNjcmVlblk7ICAvLyAzNjIKfSApOwo=
$w("#myElement").onClick( (event, $w) => {
  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

screenX

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

Syntax

get screenX(): Number

Description

The screen refers to the physical screen or screens. Therefore, two clicks on the same physical point of the screen will 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 will return different screenX values if the page is scrolled horizontally in the meantime. Coodinate Reference

Type

Number

Examples

Get a mouse click's coordinates

JHcoIiNteUVsZW1lbnQiKS5vbkNsaWNrKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGNsaWVudFggPSBldmVudC5jbGllbnRYOyAgLy8gMzYyCiAgbGV0IGNsaWVudFkgPSBldmVudC5jbGllbnRZOyAgLy8gMjQ0CiAgbGV0IG9mZnNldFggPSBldmVudC5vZmZzZXRYOyAgLy8gMTAKICBsZXQgb2Zmc2V0WSA9IGV2ZW50Lm9mZnNldFk7ICAvLyAxMgogIGxldCBwYWdlWCA9IGV2ZW50LnBhZ2VYOyAgICAgIC8vIDM2MgogIGxldCBwYWdlWSA9IGV2ZW50LnBhZ2VZOyAgICAgIC8vIDM3NgogIGxldCBzY3JlZW5YID0gZXZlbnQuc2NyZWVuWDsgIC8vIDM4OTcKICBsZXQgc2NyZWVuWSA9IGV2ZW50LnNjcmVlblk7ICAvLyAzNjIKfSApOwo=
$w("#myElement").onClick( (event, $w) => {
  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

screenY

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

Syntax

get screenY(): Number

Description

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

Type

Number

Examples

Get a mouse click's coordinates

JHcoIiNteUVsZW1lbnQiKS5vbkNsaWNrKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGNsaWVudFggPSBldmVudC5jbGllbnRYOyAgLy8gMzYyCiAgbGV0IGNsaWVudFkgPSBldmVudC5jbGllbnRZOyAgLy8gMjQ0CiAgbGV0IG9mZnNldFggPSBldmVudC5vZmZzZXRYOyAgLy8gMTAKICBsZXQgb2Zmc2V0WSA9IGV2ZW50Lm9mZnNldFk7ICAvLyAxMgogIGxldCBwYWdlWCA9IGV2ZW50LnBhZ2VYOyAgICAgIC8vIDM2MgogIGxldCBwYWdlWSA9IGV2ZW50LnBhZ2VZOyAgICAgIC8vIDM3NgogIGxldCBzY3JlZW5YID0gZXZlbnQuc2NyZWVuWDsgIC8vIDM4OTcKICBsZXQgc2NyZWVuWSA9IGV2ZW50LnNjcmVlblk7ICAvLyAzNjIKfSApOwo=
$w("#myElement").onClick( (event, $w) => {
  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

target

Gets the element that the event was fired on.

Syntax

get target(): string

Type

Element

Examples

Get the ID of the target element

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

Mixed In From

$w.Event

type

type

Gets the type of event that was fired.

Syntax

get type(): string

Type

String

Examples

Get the type of the event

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

Mixed In From

$w.Event