click
=====

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` (en-US) | Se o evento "bubbles" naturalmente ou não. |
| `cancelable` Somente leitura  | `Boolean` (en-US) | 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
-------


```js
<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
-------------------------------

### Internet Explorer

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 with JavaScript enabled. Enable JavaScript to view data.

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.*
See also
--------

* `mousedown (en-US)`
* `mouseup (en-US)`
* `mousemove (en-US)`
* `click (en-US)`
* `dblclick (en-US)`
* `mouseover (en-US)`
* `mouseout (en-US)`
* `mouseenter (en-US)`
* `mouseleave (en-US)`
* `contextmenu (en-US)`