Event

This is a temporary page to pull together an example of what the ideal end state will be. It includes some content from MDN that is not compatible with the WPD license, and should be removed soon. Draws from:

Summary

The click event type is dispatched when the user activates the primary pointer indicator (e.g., the left mouse button) on an element.

Syntax

	Keyword	Sample Usage
Event Type	`click`	`object.addEventListener("click", handler, useCapture);`
Event Attribute	`onclick`	``
Event Property	`onclick`	`object.onclick = handler;`

## Event Properties

Interface	[MouseEvent](/w/index.php?title=MouseEvent&action=edit&redlink=1)
Synchronous	Yes
Bubbles	No
Target	[Element](/w/index.php?title=Element&action=edit&redlink=1)
Cancelable	No
Default action	None

## Interface

The click event type uses the MouseEvent interface.

Implementation Note: begin transclusion of MouseEvent interface.

Property	Type	Description	Read only
screenX	long	The X coordinate of the mouse pointer in global (screen) coordinates.	Yes
screenY	long	The Y coordinate of the mouse pointer in global (screen) coordinates.	Yes
clientX	long	The X coordinate of the mouse pointer in local (DOM content) coordinates.	Yes
clientY	long	The Y coordinate of the mouse pointer in local (DOM content) coordinates.	Yes
ctrlKey	boolean	true if the control key was down when the mouse event was fired.	Yes
shiftKey	boolean	true if the shift key was down when the mouse event was fired.	Yes
altKey	boolean	true if the alt key was down when the mouse event was fired.	Yes
metaKey	boolean	true if the meta key was down when the mouse event was fired.	Yes
button	unsigned short	The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.	Yes
buttons	unsigned short	The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 \| 2).	Yes
relatedTarget	nsIDOMEventTarget	The target to which the event applies.	Yes
mozPressure `Non-standard`	float	The amount of pressure applied to a touch or tablet device when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).	Yes

Methods

boolean getModifierState(in DOMString keyArg);

getModifierState()

Returns the current state of the specified modifier key. See the document of KeyboardEvent.getModifierState() for the detail.

DOM level 3 Requires Gecko 15.0?

boolean getModifierState(
  in DOMString keyArg
);

Implementation Note: end transclusion of MouseEvent interface.

Examples

View live examples

Example: Click Event Origin

This example uses the event object to gain information about the origin of the click. In addition, it cancels the default action to prevent navigation of anchor elements, unless the SHIFT key is pressed. Normally a Shift+Click opens the target of a link in a new window; however, the script replaces the current document by setting the location of the window object.

See live example

<script type="text/javascript">
/* This code cancels the event. If the click occurs in an anchor
   and the SHIFT key is down, the document is navigated. */
function clickIt()
{
    var e = window.event.srcElement
    txtName.value = e.tagName;
    txtType.value = e.type;
    if ((e.tagName == "A") &&
        (window.event.shiftKey)) {
        window.location.href = e.href;
    }

    window.event.returnValue = false;
}
</script>
<body onclick="clickIt()">
<p>To follow a link, click while pressing the SHIFT key.</p>
<a href="about:blank">Click Here</a>
<textarea name="txtName"></textarea> <textarea name="txtType"></textarea>
</body>

Example: Binding the Click Event to Controls

This example shows how to bind the click event to grouped controls.

See live example

<head>
<script type="text/javascript">
function CookieGroup()
{
txtOutput.value = window.event.srcElement.value;
}
</script>
</head>
<body>
<!-- Controls are grouped by giving them the same NAME but unique IDs. -->
<p>Grouped Radio Buttons<br>
<input type="radio"
    name="rdoTest"
    id="Cookies"
    value="accept_cookies"
    checked
    onclick="CookieGroup()"><br>
<input type="radio"
    name="rdoTest"
    id="NoCookies"
    value="refuse_cookies"
    onclick="CookieGroup()"><br>
</p>
<p>Ungrouped Radio Button<br>
<input type="radio"
    name="rdoTest1"
    value="chocolate-chip_cookies"
    onclick="CookieGroup()"><br>
</p>
<p>Value of control on which the onclick event has fired<br>
<textarea name="txtOutput" style="width: 250px"></textarea> </p>
</body>

Usage

If the user clicks the left mouse button, the click event for an object occurs only if the mouse pointer is over the object and an mousedown and an mouseup event occur in that order. For example, if the user clicks the mouse on the object but moves the mouse pointer away from the object before releasing, no click event occurs.

The click event changes the value of a control in a group. This change initiates the event for the group, not for the individual control. For example, if the user clicks a radio button or check box in a group, the click event occurs after the beforeupdate and afterupdate events for the control group.

If the user clicks an object that can receive the input focus but does not already have the focus, the focus event occurs for that object before the click event. If the user double-clicks the left mouse button in a control, an dblclick event occurs immediately after the click event.

Although the click event is available on a large number of HTML elements, if a document is to be accessible to keyboard users, you should restrict its use to the a, input, area, and button elements. These elements automatically allow keyboard access through the TAB key, making documents that use the elements accessible to keyboard users. For more information, please see the section on writing accessible Dynamic HTML.

Initiates any action associated with the object. For example, if the user clicks an a object, the client loads the document specified by the href property. To cancel the default behavior, set the returnValue property of the event object to FALSE.

To invoke this event, do one of the following:

Click the object.
Invoke the click method.
Press the ENTER key in a form.
Press the access key for a control.
Select an item in a combo box or list box by clicking the left mouse button or by pressing the arrow keys and then pressing the ENTER key.

Notes

None.

Specifications

Specification	Status	Relevant changes
HTML5	Working Draft	list changes (onclick attribute)
DOM 3 Events: MouseEvent	Working Draft	list changes
DOM Level 2: MouseEvent	Recommendation	Original DOM specification
HTML 4.01	Recommendation	Original onclick attribute specification

Browser Compatibility

Desktop

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	5.0
4.0 -webkit	Template:CompatGeckoDesktop(“1”)	5.5	7.0	1.0

Implementation Note: The prefix tag (here, a fake value just to show it off) would be a link to the concept of prefixes.

Mobile

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	1.0	Template:CompatGeckoMobile(“1”)	1.0	1.0	1.0

Compatibility Notes

Browser	Version	Note
Firefox	15.0	Introduces the `buttons` attribute on attribute on Windows, Linux (GTK) and Mac. On Mac OS X 10.5, the `buttons` attribute always returns 0 because there is no platform API for implementing this feature.
Firefox	15.0	On Windows, if user installed a mouse driver and its utility software which can customize button actions (e.g., IntelliPoint and SetPoint), the Middle (wheel) button, 4th button and 5th button may not be set actually even when they’re pressed.
Firefox	15.0	On Linux (GTK), 4th button and 5th button are not supported. And also, `mouseup` event always have the releasing button information in this attribute value.