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?

Para IE9 only:
- Asignar background-color: rgba(0,0,0,0)
- Asignar opacity: 0 y asignar explicitamente background-color un valor diferente a transparent
Para IE8 and IE9:
- Asignar filter: alpha(opacity=0); y asignar explicitamente background-color un valor diferente a transparent

Safari Mobile

BCD tables only load in the browser

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.