Webdesign mit CSS, HTML und Javascript
Stil mit {stil}
![]() Die Abkürzungen der Objektive foto.5lux.de Online-Magazin für Fotografie und Bildbearbeitung |
Jan 2009
Javascript click • Beim Mausklick auf ein Element
click • Javascript Event für alle Elemente außer APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE
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. Das click-Ereignis ist definiert als mousedown und mouseup über derselben Stelle.
onclick ruft einen Event Handler auf, wenn eine Maustaste über einem Element gedrückt wird. Ein click tritt auf, wenn die Maustaste an derselben Stelle heruntergedrückt und losgelassen wird.
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.
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
Beispiel
function watchClick()
{
if (!document.getElementById) return true;
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;
}
}
