CSS, HTML und Javascript mit {stil}

Javascript onclick • ondblclick

Javascript onclick – Klick mit der Maus und Touch

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

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.

  • 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-Event 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 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.

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

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 entsteht ein kleiner Delay, bevor die Aktion aufgerufen wird.

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

Click or Touch
<script>
    $('#clickOrTouch').on('click touchstart', function () {
        $(this).attr('style','fill:#C5C2B9');
    })
</script>

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

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;
  }  
}

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