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.
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
handler
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:
void
Was this helpful?
Get the ID of the element that was clicked
Copy Code
1$w("#myButton").onClick( (event) => {2 let targetId = event.target.id; // "myButton"3 } );
Get a mouse click's coordinates
Copy Code
1$w("#myButton").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 } );
Change the background color of the element that was clicked
Copy Code
1$w('#myButton').onClick((event) => {2 const clickedElement = event.target;3 clickedElement.style.backgroundColor = 'blue';4 });