CodeAPI

ClickableMixin

Provides functionality for elements that can be be clicked.

Table of Contents

FUNCTIONS

?
Perform actions on an object.
onClick( )Adds an event handler that runs when the element is clicked.
onDblClick( )Adds an event handler that runs when the element is double-clicked.

onClick( )

Adds an event handler that runs when the element is clicked.

Description

An element receives a click event when a user clicks on the element and releases.

When a user double-clicks an element, two click events are fired before a doubleClick event is also fired.

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

onDblClick( )

Syntax

function onClick(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: MouseEvent, $w: $w)

The name of the function or the function expression to run when the element is clicked.

?
The kind of data the property stores.
event
The mouse event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element to which the event handler was added.

Examples

Get the ID of the element that was clicked

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

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
} );

onDblClick( )

Adds an event handler that runs when the element is double-clicked.

Description

An element receives a dblClick event when a user double-clicks on the element and releases.

When a user double-clicks an element, two click events are fired before a doubleClick event is also fired.

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

onClick( )

Syntax

function onDblClick(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: MouseEvent, $w: $w)

The name of the function or the function expression to run when the element is clicked.

?
The kind of data the property stores.
event
The mouse event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element to which the event handler was added.

Examples

Get the ID of the element that was double-clicked

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