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
y asignar explicitamenteopacity
: 0background-color
un valor diferente atransparent
- Asignar
- Para IE8 and IE9:
- Asignar
filter: alpha(opacity=0);
y asignar explicitamentebackground-color
un valor diferente atransparent
- Asignar
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.
¿Cómo evitarlo?
- Asignar
cursor
: pointer;
en el elemento o uno de sus contendores. - Ubicar un attributo
onclick="void(0)"
al elemento o cualquiera de sus elementos contenedores, menos<body>
. - Usar elementos interactivos (e.g.
<a>
) en lugar de no interactivos (e.g.<div>
). - No usar delegacion del evento click.
Lo siguientes elementos son considerados por Safari típicamente interactivos