click

El evento "click" se dispara cuando se presiona el botón de un dispositivo de entrada (Mouse o Mousepad) sobre un elemento. 

Información General

Especificación
DOM L3
Interfaz
MouseEvent
Bubbles
Yes
Cancelable
Yes
Target
Element
Default Action
Varies

Propiedades

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 Whether the event normally bubbles or not
cancelable Read only Boolean Whether the event is cancellable or not?
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.

Ejemplo

<div id="prueba"></div>

<script>
  document.getElementById("prueba").addEventListener("click", function( event ) {
    // presentar la cuenta de clicks realizados sobre el elemento con id "prueba"
    event.target.innerHTML = "Conteo de Clicks: " + event.detail;
  }, false);
</script>

Compatibilidad con Navegadores

Internet Explorer

Internet Explorer 8 & 9 tiene problemas con elementos con un  valor background-color de transparent que es sobrepuesto a los demas elementos por lo que no les permite recibir el evento.

Un ejemplo aqui

¿Cómo evitarlo?

Safari Mobile

En Safari Mobile 7.0+ ( también algunas versiones anteriores) presenta un problema cuando se da click sobre elementos que no son tipicamente interactivos como es el caso de un div. 

¿Cómo evitarlo?

  • Asignar cursor: pointer; en el elemento o uno de sus contendores.
  • Ubicar un attributo onclick="void(0)" al elemento o cualquiera de sus elementos contenedores, menos <body>.
  • Usar elementos interactivos (e.g. <a>) en lugar de no interactivos (e.g. <div>).
  • No usar  delegacion del evento click.

Lo siguientes elementos son considerados por Safari típicamente interactivos

  • <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.

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
Soporte Básico (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
En elementos inhabilitados (Yes)[1] Sin soporte (Yes)[2] Sin soporte (Yes)[1] ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte Básico ? ? ? ? ?
En elementos inhabilitados ? ? ? ? ?

[1] Sólo funciona para los tipos <textarea> elements and some <input> .

[2] Internet Explorer sólo dispara el evento click en los elementos  <input> tipo checkbox o radio cuando se ha realizdo sobre ellos un doble click.

Véase también