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
- 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
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
e defina explicitamenteopacity
como: 0background-color
com outro valor diferente detransparent
- Defina o
-
Para IE8 e IE9: Defina a propriedade
filter como: alpha(opacity=0);
e obackground-color
com outro valor diferente detransparent
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):