click

Esta tradução está incompleta. Ajude atraduzir este artigo.

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 The event target (the topmost target in the DOM tree).
type Somente leitura DOMString The type of event.
bubbles Somente leitura Boolean Whether the event normally bubbles or not
cancelable Somente leitura Boolean Whether the event is cancellable or not?
view Somente leitura WindowProxy document.defaultView (window of the document)
detail Somente leitura long (float) Um contador de cliques consecultivos que ocorreram em um curto intervalo de tempo, com incremento de 1.
currentTarget Somente leitura EventTarget The node that had the event listener attached.
relatedTarget Somente leitura 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 Somente leitura long The X coordinate of the mouse pointer in global (screen) coordinates.
screenY Somente leitura long The Y coordinate of the mouse pointer in global (screen) coordinates.
clientX Somente leitura long The X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY Somente leitura long The Y coordinate of the mouse pointer in local (DOM content) coordinates.
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 nos Browsers

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:

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="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.

Feature Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
On disabled form elements (Yes)[1] Não suportado (Yes)[2] Não suportado (Yes)[1] ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?
On disabled form elements ? ? ? ? ?

[1] Only works for <textarea> elements and some <input> element types.

[2] Internet Explorer only triggers the click event on <input> elements of type checkbox or radio when the element is double-clicked.

See also

Etiquetas do documento e colaboradores

 Colaboradores desta página: diegocesar
 Última atualização por: diegocesar,