Tidligere på året udarbejdede jeg en lille javascript widget til hjælp med indtastning af datoer i web applikationer. Den understøtter bl.a. at datoen kan ændres ved tryk på [pil op] og [pil ned] på tastaturet. Og det er en fin hjælp når man alligevel har fingrene på tastaturet. Men brug af denne widget har siden afsløret at der er en række situationer hvor det ville være fordelagtigt at kunne bladre datoer med musen. Og det er helt oplagt at det meget praktiske hjul som de fleste mus efterhånden er udstyret med kan bruges til dette.

Opgaven er ikke triviel. W3’s specifikationer rummer ingen events fra hjulet, så vi er nødt til at bevæge os ind i det pigtrådsklædte, minefyldte område med browser-specifikke features.

Microsoft har holdt stilen fra de øvrige events og opfundet én kaldet “onmousewheel” som de fleste objekter understøtter. Mozilla er gået XUL-vejen og har kaldt sin for “DOMMouseScroll”. Og naturligvis benytter de værdier med modsat fortegn og af drastisk forskellig størrelse til at repræsentere hjulets rotationer, men der er noget at arbejde med begge steder! Sådan her gøres det:

I DateBox objektet fra min widget har jeg tilføjet en funktion onMouseScroll:

onMouseScroll : function (e) {
  if (!e) var e = window.event;
  var input = this;

  if ("" != input.value) {
    var d = DateBox.parseDateString(input.value);
    if (e.wheelDelta <= 0 || e.detail > 0) {
      d.setDate(d.getDate() + 1); // wheel rotated down (towards user)
    } else {
      d.setDate(d.getDate() - 1); // wheel rotated up (away from user)
    }
    input.value = DateBox.outputDateString(d);
    DateBox.validate(input);
    if (e.preventDefault) e.preventDefault(); // Mozilla, don't scroll page
    return false; // Internet Explorer, don't scroll the page
  }
}

Den tredje if sætning i funktionen er den der måler på hjulets rotation. wheelDelta egenskaben er proprietær for Microsoft, og detail egenskaben er proprietær for Mozilla. I funktionen ændres den indtastede dato én dag frem eller tilbage, og derefter annulleres standard-reaktionen på hændelsen (at siden scroller). Mozilla holder sig her til W3’s event model, hvor Microsoft kræver at event handleren returnerer false.

Tilbage er kun at registrere funktionen som event handler. Det er gjort ved at indsætte følgende til sidst i register funktionen:

if (obj.addEventListener) {
  obj.addEventListener("DOMMouseScroll", this.onMouseScroll, false);
} else {
  obj.onmousewheel = this.onMouseScroll;
}

Det var det hele. Klik over på artiklen om indtastning af datoer, indtast en dato i feltet (der kræves en dato for at man kan “bladre”), og prøv så at rulle med hjulet mens cursoren er over feltet. Feltet behøver ikke at have fokus, blot musen er over det.