click

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

O evento click event é disparado quando o botão de um dispositivo apontador (normalmente o botão de um mouse) é pressionado e solto logo em seguida em um mesmo elemento.

Informações gerais

Especificação: DOM L3
Interface: MouseEvent
Bubbles: Sim
Cancelável: Sim
Target: Element
Ação padrão: Variável

Propriedades

Property	Type	Description
`target` Somente leitura	`EventTarget`	O alvo do evento (o mais alto na arvore de DOM).
`type` Somente leitura	`DOMString`	Tipo do evento.
`bubbles` Somente leitura	`Boolean`	Se o evento "bubbles" naturalmente ou não.
`cancelable` Somente leitura	`Boolean`	Se o evento é cancelável ou não
`view` Somente leitura	`WindowProxy`	`document.defaultView` (`window` do documento)
`detail` Somente leitura	`long` (`float`)	Um contador de cliques consecutivos que ocorrem em um curto espaço de tempo, incrementado em 1.
`currentTarget` Somente leitura	EventTarget	O node que contem o eventListener.
`relatedTarget` Somente leitura	EventTarget	Para eventos `mouseover`, `mouseout`, `mouseenter` e `mouseleave`: o alvo do evento complementar (o `mouseleave` no caso de um evento `mouseenter` ). `null` , se falso.
`screenX` Somente leitura	long	A coordenada X do ponteiro do mouse na tela.
`screenY` Somente leitura	long	A coordenada Y do ponteiro do mouse na tela.
`clientX` Somente leitura	long	A coordenada X do ponteiro do mouse no DOM atual.
`clientY` Somente leitura	long	A coordenada Y do ponteiro do mouse no DOM atual.
`button` Somente leitura	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` Somente leitura	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` Somente leitura	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` Somente leitura	boolean	`true` if the control key was down when the event was fired. `false` otherwise.
`shiftKey` Somente leitura	boolean	`true` if the shift key was down when the event was fired. `false` otherwise.
`altKey` Somente leitura	boolean	`true` if the alt key was down when the event was fired. `false` otherwise.
`metaKey` Somente leitura	boolean	`true` if the meta key was down when the event was fired. `false` otherwise.

Exemplo

<div id="test"></div>

<script>
  document.getElementById("test").addEventListener("click", function( event ) {
    // mostra o contador de cliques dentro da div clicada
    event.target.innerHTML = "Total de cliques: " + event.detail;
  }, false);
</script>

Compatibilidade com navegadores

O Internet Explorer 8 e 9 apresentam um bug onde o elemento com a propriedade background-color é definida como transparent that are overlaid on top of other element(s) won't receive click events. Todos os eventos click serão disparados no elemento underlying instead. Veja uma demonstração neste exemplo.

Soluções de contorno para este bug:

Somente para o IE9:
- Defina o background-color como: rgba(0,0,0,0)
- Defina a opacity como: 0 e defina explicitamente background-color com outro valor diferente de transparent
Para IE8 e IE9: Defina a propriedade filter como: alpha(opacity=0); e o background-color com outro valor diferente de transparent

Safari Mobile

BCD tables only load in the browser

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="void(0)" attribute to the element or any of its ancestors up to but not including <body>.
Use a typically interactive element (e.g. <a>) 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.