mozilla
Your Search Results

    click

    The click event is fired when a pointing device button (usually a mouse button) is pressed and released on a single element.

    General info

    Specification
    DOM L3
    Interface
    MouseEvent
    Bubbles
    Yes
    Cancelable
    Yes
    Target
    Element
    Default Action
    Varies

    Properties

    Property Type Description
    target Read only EventTarget The event target (the topmost target in the DOM tree).
    type Read only DOMString The type of event.
    bubbles Read only boolean Does the event normally bubble?
    cancelable Read only boolean Is it possible to cancel the event?
    view Read only WindowProxy document.defaultView (window of the document)
    detail Read only long (float) A count of consecutive clicks that happened in a short amount of time, incremented by one.
    currentTarget Read only EventTarget The node that had the event listener attached.
    relatedTarget Read only EventTarget For mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
    screenX Read only long The X coordinate of the mouse pointer in global (screen) coordinates.
    screenY Read only long The Y coordinate of the mouse pointer in global (screen) coordinates.
    clientX Read only long The X coordinate of the mouse pointer in local (DOM content) coordinates.
    clientY Read only long The Y coordinate of the mouse pointer in local (DOM content) coordinates.
    button Read only 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.
    buttons Read only 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). More info.
    mozPressure Read only float The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
    ctrlKey Read only boolean true if the control key was down when the event was fired. false otherwise.
    shiftKey Read only boolean true if the shift key was down when the event was fired. false otherwise.
    altKey Read only boolean true if the alt key was down when the event was fired. false otherwise.
    metaKey Read only boolean true if the meta key was down when the event was fired. false otherwise.

    Example

    <div id="test"></div>
    
    <script>
      document.getElementById("test").addEventListener("click", function( event ) {
        // display the current click count inside the clicked div
        event.target.innerHTML = "click count: " + event.detail;
      }, false);
    </script>
    

    Browser compatibility

    Internet Explorer

    Internet Explorer 8 & 9 suffer from a bug where elements with a computed background-color of transparent that are overlaid on top of other element(s) won't receive click events. Any click events will be fired at the underlying element(s) instead. See this live example for a demonstration.

    Known workarounds for this bug:

    Safari Mobile

    Safari Mobile 7.0+ (and likely earlier versions too) suffers from a bug where click events aren't fired on elements that aren't typically interactive (e.g. <div>) and which also don't have event listeners directly attached to the elements themselves (i.e. event delegation is being used). See this live example for a demonstration. See also Safari's docs on making elements clickable and the definition of "clickable element".

    Known workarounds for this bug:

    • Set cursor: pointer; on the element or any of its ancestors.
    • Add a dummy onclick="" attribute to the element or any of its ancestors up to but not including <body>.
    • Use a typically interactive element (e.g. <a>) instead instead of one that isn't typically interactive (e.g. <div>).
    • Stop using click event delegation.

    Safari Mobile considers the following elements to be typically interactive (and thus they aren't affected by this bug):

    • <a> (but it must have an href)
    • <area> (but it must have an href)
    • <button>
    • <img>
    • <input>
    • <label> (but it must be associated with a form control)
    • <textarea>
    • This list is incomplete; you can help MDN by doing further testing/research and expanding it.

    Document Tags and Contributors

    Tags: 
    Contributors to this page: Sheppy, teoli, ethertank, louisremi, cvrebert
    Last updated by: cvrebert,