Jan 2009

Javascript onclick • ondblclick • Beim Mausklick auf ein Element

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

Jedes Ereignis muss abgearbeitet sein, bevor das nächste Ereignis beginnen kann.

  • 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 onclick-Ereignis benutzt werden, um Benutzereingaben clientseitig zu prüfen. Wenn onclick 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 / ondblclick löst ein Event für alle Elemente außer BASE, BASEFONT, BDO, BR, CANVAS, FRAME, FRAMESET, HEAD, HTML, IFRAME, PARAM, SCRIPT aus.

Informationen des click-Events

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.

Informationen des dblclick-Events

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

if (document.getElementById('theBox')) {
  var theBox = document.getElementById('theBox');
  theBox.onclick = function(evt) {
    evt = (evt) ? evt : ((window.event) ? window.event : "");
    var elem = (evt.target) ? evt.target : evt.srcElement;
    var response = document.getElementById('response');
    response.innerHTML = 'Type ' + evt.type + ' Target ' + elem.tagName + '<br />'
        + ' pageX ' + evt.pageX + ' pageY ' + evt.pageY + '<br />'
        + ' screenX ' + evt.screenX + ' screenY ' + evt.screenY  + '<br />'
        + ' clientX ' + evt.clientX + ' clientY ' + evt.clientY  + '<br />'
        + ' altKey ' + evt.altKey + ' ctrlKey ' + evt.ctrlKey + '<br />'
        + ' shiftKey ' + evt.shiftKey + ' metaKey ' + evt.metaKey;
  }  
}

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