MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Klik

Deze vertaling is niet volledig. Help dit artikel te vertalen vanuit het Engels.

Het kilk event wordt afgevuurd als een knop van een aanwijsapparaat (meestal de primaire knop van een muis) word ingedrukt en losgelaten op een enkel element.

Algemene info

Specificatie
DOM L3
Interface
MouseEvent
Bubbelt
Ja
Afbreekbaar
Ja
Doel
Element
Standaard Actie
Varieert

Voorbeeld

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

<script>
  document.getElementById("test").addEventListener("click", function( event ) {
    // Laat het huidige aantal kliks in het klikelement zien.
    event.target.textContent = "Aantal kliks: " + event.detail;
  }, false);
</script>

Browser Compatibiliteit

Internet Explorer

Internet Explorer 8 & 9 suffer from a bug where elements with a computed background-color of transparent that are overlaid on top of other element(s) won't receive click events. Any click events will be fired at the underlying element(s) instead. See this live example for a demonstration.

Known workarounds for this 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] Niet ondersteund (Yes)[2] Niet ondersteund (Yes)[1] ?
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? (Yes) ? ? ? ?
On disabled form elements ? Niet ondersteund ? ? ? ?

[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.

Bekijk ook

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: anned20
 Laatst bijgewerkt door: anned20,