CSS, HTML & Javascript mit {stil}

Javascript onclick • ondblclick

Das Herunterdrücken einer Maustaste erzeugt immer drei Events: mousedown, mouseup und click, die in dieser Reihenfolge nacheinander abgearbeitet werden.

Javascript onclick Event

Vom Click zum Touch

Jedes Event muss abgearbeitet sein, bevor das nächste Ereignis beginnen kann. Wenn die Maustaste auf einem Element heruntergedrückt wird und der Benutzer die Maus dann aus dem Element herauszieht, entsteht kein onclick. Um Touchscreens müssen wir uns bei click-Events selten Sorgen machen. Die meisten Elemente einer Webseite funktionieren ohne besondere Rücksicht auf Touchscreens. Der klassische Klick mit der Maus wird automatisch in ein touch-Event übersetzt.

  • onclick und ondblclick lösen den Event Handler aus, wenn die Maustaste an derselben Stelle heruntergedrückt bzw. doppelt geklickt und losgelassen wird.
  • dblclick ruft einen Event Handler auf, wenn die Maus doppelt auf ein Element klickt. Aber bevor der Doppelklick »feuert« und das Javascript das Ereignis ondblclick an den Event Handler meldet, tritt naturgemäß das Ereignis onclick ein.

In Formularen kann das click-Event benutzt werden, um Benutzereingaben clientseitig zu prüfen. Wenn click bei Button, Checkbox oder Radio false zurück gibt, wurden die Schalter nicht gesetzt. Wenn onclick bei Reset true liefert, wurde das Ausfüllen des Formulars abgebrochen.

Javascript onclick und ondblclick wirken nur bei sichtbaren Elementen und lösen ein Event für alle Elemente außer BASE, BDO, BR, CANVAS, HEAD, HTML, IFRAME, PARAM, SCRIPT aus.

click-Event Informationen

Für viele Anwendungen ist nicht einfach gefragt, ob die Maustaste gedrückt wurde, sondern auch wo sie gedrückt wurde und ob gleichzeitig eine Taste gedrückt wurde.

<div id="theBox"></div>
<div id="response"></div>
<div id="point"></div>

Javascript: Alles über das click-Event

let  theBox = document.getElementById('theBox');
theBox.onclick = function(evt) {
	evt = window.event;
	let elem = evt.target;
	let response = document.getElementById('response');
	response.innerHTML = 'Type ' + evt.type + ' Target ' + elem.tagName 
    + ' pageX ' + evt.pageX + ' pageY ' + evt.pageY 
    + ' screenX ' + evt.screenX + ' screenY ' + evt.screenY  
    + ' clientX ' + evt.clientX + ' clientY ' + evt.clientY  
    + ' altKey ' + evt.altKey + ' ctrlKey ' + evt.ctrlKey 
    + ' shiftKey ' + evt.shiftKey + ' metaKey ' + evt.metaKey;
	point.setAttribute('style','top:' + evt.pageY + 'px;left:' + evt.pageX + 'px;width:5px;height:5px;background:red;position:absolute');
}

Click Events vs. Touch Events

Auf Geräten mit einem Touch-Screen wird das click-Event automatisch zu einem touch-Event, aber so einfach ist die Übersetzung nicht. Auf dem Touch-Screen kann ein kleiner Delay entstehen – eine Verzögerung –, bevor die Aktion aufgerufen wird.

Touch-Events liefern ähnliche Informationen wie Click-Events, aber auch zusätzliche Daten, die den mobilen Geräten vorbehalten sind: Mehr zum Touch Event

Wenn gleichzeitig das click- und das touchstart-Event abgefragt werden, reagieren Touch-Screens ohne die kleine Verzögerung.

CLICK
let circle = document.querySelector(".circle");
circle.ontouchstart = 
circle.onclick = function (evt) {
 …
}

Seit Ende 2015 / Anfang 2016 zeigen die meisten mobilen Browser – allen voran Chrome und Safari - keine 300ms Verzögerung mehr, wenn im Viewport-Metatag width=device-width angegeben ist.

Informationen des dblclick-Events

Ein dblclick-Event entsteht, wenn der Benutzer mit der Maus schnell zwei mal hintereinander auf ein Element klickt. Auf dem Touch-Screen ist ein schnelles doppeltes Tap die Geste fürs Zoomen.

dblclick Informationen
if (document.getElementById('kong')) {
document.getElementById('kong').ondblclick = function(evt) {
   …
}

onclick Attribute

type
Typ des Ereignisses
target
Objekt zu dem das Ereignis ursprünglich gesendet wurde
eventPhase
Phase, in der das Ereignis bearbeitet wird: AT_TARGET, BUBBLING_PHASE, CAPTURING_PHASE
bubbles
true, wenn das Ereignis nach oben steigen kann
cancelable
true, wenn die Aktion des Ereignis verhindert werden kann
timeStamp
Zeit in Millisekunden, zu der das Ereignis eingetreten ist
screenX, screenY, clientX, clientY
Position des Mauszeigers zum Zeitpunkt des Ereignisses
altKey, ctrlKey, shiftKey, metaKey
zusätzlich gedrückte Tasten
button
die Maustaste, die das Ereignis auslöst
Suchen auf mediaevent.de