Search.../

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: Do not use the Editor Link panel to redirect on click when a link is already defined using the onClick() function. To avoid unpredictable behavior, remove the link from the Editor Link panel.

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector for working with elements in repeater items, 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.

Syntax

function onClick(handler: MouseEventHandler): Element
handler: function MouseEventHandler(event: MouseEvent, $w: $w): void

onClick Parameters

NAME
TYPE
DESCRIPTION
handler

MouseEventHandler

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

Returns

The element to which the event handler was added.

Return Type:

MouseEventHandler Parameters

NAME
TYPE
DESCRIPTION
event

MouseEvent

The mouse event that occurred.

$w

$w

Deprecated: A selector function. The $w function was used to enable event handlers to work with elements in repeaters. Now, to get a scoped selector for working with repeater items, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context).

Returns

This function does not return anything.

Return Type:

void
Mixed in from:$w.ClickableMixin

Related Content:

Was this helpful?

Get the ID of the element that was clicked

Code Example

Copy Code
1$w("#myElement").onClick( (event) => {
2 let targetId = event.target.id; // "myElement"
3} );
Get a mouse click's coordinates

Code Example

Copy Code
1$w("#myElement").onClick( (event) => {
2 let clientX = event.clientX; // 362
3 let clientY = event.clientY; // 244
4 let offsetX = event.offsetX; // 10
5 let offsetY = event.offsetY; // 12
6 let pageX = event.pageX; // 362
7 let pageY = event.pageY; // 376
8 let screenX = event.screenX; // 3897
9 let screenY = event.screenY; // 362
10} );