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.
You can also define an event handler using the Properties and Events panel.
This will automatically add the required code for the selected element and event:
javascript | Copy Codeexport function button1_click(event) {// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4// Add your code for this event here:}
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.
Syntax
function onClick(handler: MouseEventHandler): Elementhandler: function MouseEventHandler(event: MouseEvent): void
onClick Parameters
NAME
TYPE
DESCRIPTION
The name of the function or the function expression to run when the element is clicked.
MouseEventHandler Parameters
NAME
TYPE
DESCRIPTION
Returns
This function does not return anything.
Return Type:
Related Content:
Was this helpful?
1$w("#myElement").onClick( (event) => {2 let targetId = event.target.id; // "myElement"3} );
1$w("#myElement").onClick( (event) => {2 let clientX = event.clientX; // 3623 let clientY = event.clientY; // 2444 let offsetX = event.offsetX; // 105 let offsetY = event.offsetY; // 126 let pageX = event.pageX; // 3627 let pageY = event.pageY; // 3768 let screenX = event.screenX; // 38979 let screenY = event.screenY; // 36210} );
1$w('#myElement').onClick((event) => {2 const clickedElement = event.target;3 clickedElement.style.backgroundColor = 'blue';4});