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.
Note: When using the 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 object that onclick
was bound too (which will also match event.currentTarget
)
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 StandardThe definition of 'onclick' in that specification. | Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
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
GlobalEventHandlers.onclick by Mozilla Contributors is licensed under CC-BY-SA 2.5.