The onclick
property of the GlobalEventHandlers
mixin is the EventHandler
for processing click
events on a given element.
The click
event is raised when the user clicks on an element. It fires after the mousedown
and mouseup
events, in that order.
click
event to trigger an action, also consider adding this same action to the keydown
event, to allow the use of that same action by people who don't use a mouse or a touch screen.Syntax
target.onclick = functionRef;
Value
functionRef
is a function name or a function expression. The function receives a MouseEvent
object as its sole argument. Within the function, this
will be the element upon which the event was triggered.
Only one onclick
handler can be assigned to an object at a time. You may prefer to use the EventTarget.addEventListener()
method instead, since it's more flexible.
Examples
Detecting clicks
This example simply changes the color of an element when it's clicked upon.
HTML
<div id="demo">Click here</div>
JavaScript
document.getElementById('demo').onclick = function changeContent() { document.getElementById('demo').innerHTML = "Help me"; document.getElementById('demo').style = "Color: red"; }
Result
Getting the coordinates of clicks
This example displays the coordinates at which the most recent mouse button click occurred.
HTML
<p>Click anywhere in this example.</p> <p id="log"></p>
JavaScript
let log = document.getElementById('log'); document.onclick = inputChange; function inputChange(e) { log.textContent = `Position: (${e.clientX}, ${e.clientY})`; }
Result
Specification
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'onclick' in that specification. |
Living Standard |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
onclick | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 9 | Opera Full support 9 | Safari Full support 3 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
See also
click
event- Related event handlers