Stil mit {stil}

Aug 2007

Javascript mouseup • Beim Loslassen der Maustaste

mouseup • Javascript Ereignis 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 Javascript-Ereignis mouseup ruft einen Event Handler auf, wenn eine Maustaste über einem Element losgelassen wird.

Attribute und Kontextinformationen

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

Auf die Box klicken, um die Hintergrundfarbe zu ändern

addLoadEvent(changeVal);

function changeVal() {
   var changeColor = document.getElementById('thisBox');
   changeColor.onmouseup = function (event) {
     this.setAttribute ('style',
         'background: tan; border: 4px solid firebrick; 
         width: 300px; height: 100px;');
   }
}

<p>Auf die Box klicken, um die Hintergrundfarbe zu ändern</p>
<div id="thisBox" style="background: silver; 
    width: 300px; height: 50px; 
    border: 1px solid red;"></div>