JavaScript MouseUp Event IE 8

[Firestorm-]

Tag Leutz,

ich habe folgendes Problem:
Im Zuge eines Projekts nutze ich die DevExpress 10.1 Komponenten für ASP. Ausserdem wird JavaScript ohne irgendwelche libs eingesetzt, sprich kein JQuery, Prototype-JS, etc...

Ich hab ein Image. Darauf möchte ich ein Panning ausführen. Hierzu hab ich meine EventListener erstellt, einen mousedown-, mousemove- und mouseup-Handler. (siehe Code)

/// <summary>
/// The drag object on which to execute the panning.
/// </summary>
var dragObject = null;

/// <summary>
/// The mouse offset.
/// </summary>
var mouseOffset = null;

/// <summary>
/// Startlocation of the image without offset.
/// </summary>
var imgStartLoc = null;

/// <summary>
/// Start coordinates from the onclick event.
/// </summary>
var startCoordinates = { x: 0, y: 0 };

/// <summary>
/// Inits the PanningEventHandler to a specified item.
/// </summary>
/// <param name='item'>The item to add the EventListener to.</param>
function InitPanningEventHandler(item)
{
  if (item == null)
  {
    alert('Fehler bei der Anmeldung des Panning-Event-Handlers');
    return;
  }

  // add the EventListener to the MapImage, depending which browser is currently in use
  if (item.addEventListener)
  { // Firefox, Safari, Opera, Google Chrome
    item.onmousedown = PanningMouseDown;          
    item.onmousemove = PanningMouseMove;         
    item.onmouseup = PanningMouseUp;     
    // was document.onmouseup before -> problem was:
    // if the user klicks outside the mapimage it's interpreted as a callback 
    // so we don't need callbacks on klicking somewhere in the document
  }
  else  // IE :-(
  {
    item.attachEvent('onmousedown', PanningMouseDown);
    item.attachEvent('onmousemove', PanningMouseMove);
    item.attachEvent('onmouseup', PanningMouseUp);  
  }
  return false;
}


/// <summary>
/// Handles the mousemouve event on the item the listener was registered on.
/// </summary>
/// <param name='ev'>The mousemoved event.</param>
/// <returns>false</returns>
function PanningMouseMove(ev)
{
  ev = ev || window.event;
  var mousePos = MouseCoords(ev);

  if (dragObject != null)
  {
    dragObject.style.position = 'absolute';
    var mouseDelta = { x: mousePos.x - mouseOffset.x, y: mousePos.y - mouseOffset.y }

    dragObject.style.top = (imgStartLoc.y + mouseDelta.y) + 'px';
    dragObject.style.left = (imgStartLoc.x + mouseDelta.x) + 'px';
    return false;
  }
}

/// <summary>
/// Handles the mouseup event on the item the listener was registered on.
/// </summary>
/// <param name='event'>The mouseup event.</param>
/// <returns>false</returns>
function PanningMouseUp(event)
{
  //alert('mouse up');
  var endCoordinates = MouseCoords(event);
  dragObject = null;
   
  // get the vectorial difference between dragPoint and releasePoint of the mouse
  var diffVector = { x: endCoordinates.x - startCoordinates.x, y: endCoordinates.y - startCoordinates.y };

  // only do the Callback if the click on the image leaded to an valid diff vector
  if( (diffVector.x > 3 | diffVector.x < -3) | (diffVector.y > 3 | diffVector.y < -3) )
  {
      // execute the callback with the vectorial difference in order to render the new card piece
      Callback.PerformCallback('pan_diff_x=' + diffVector.x + '&' + 
                            'pan_diff_y=' + diffVector.y + '&' + 
                            'height=' + document.getElementById('uxSplitter_uxCallback').offsetHeight+ '&' + 
                            'width=' + document.getElementById('uxSplitter_uxCallback').offsetWidth);
     
  }
  else if(diffVector.x <= 3 | diffVector.x >= -3 || diffVector.y <= 3 | diffVector.y >= -3) // there was only a click to display a hint popup
  {
    // call the method to display a hint
    HandleHintRequest(endCoordinates);
  }
  
  return false;
}

/// <summary>
/// Handles the mousedown event on the item the listener was registered on.
/// </summary>
/// <param name='event'>The mousedown event.</param>
/// <returns>false</returns>
function PanningMouseDown(event)
{
  event = event || window.event;

  if (event.target != null)           // for the rest of the world
  {
    dragObject = event.target;
  }
  else if (event.srcElement)  // for IE
  {
    dragObject = event.srcElement;
  }

  mouseOffset = MouseCoords(event);
  startCoordinates = MouseCoords(event);
  imgStartLoc = {
    x: isNaN(parseInt(dragObject.style.left)) ? 0 : parseInt(dragObject.style.left),
    y: isNaN(parseInt(dragObject.style.top)) ? 0 : parseInt(dragObject.style.top)
  };

  return false;
}

Kurze Erklärung zum Code:
Bei einem MouseDown-Event wird das DragObject gesetzt, sprich das Image wird "draggable" gemacht. Bei dem MouseMove Event wird pro Auslösung die Position des Bildes neu berechnet und gesetzt, sodass das Bild mit einer Mausbewegung im Rahmen verschoben werden kann. Bei einem MouseUp Event wird der Differenzvektor zwischen Start- und Endkoordinate berechnet um rauszufinden in welche Richtung und wieviel das Bild verschoben wurde.
Soweit so gut... Alles tut soweit im Firefox (3.6, sowie 4.0 Beta 10) und dem Chrome. Nur der IE in der Version 8 streikt. Dieser ignoriert das MouseUp Event vollkommen, es wird schlichtweg nicht geworfen. Wenn ich mich durch den Code debugge, funktioniert alles einwandfrei, selbst im IE. Somit geh ich davon aus dass es ein Timing Problem ist. Ich kann es aber nicht konkret deuten und spekuliere auf irgendwelche Wechselwirkungen mit dem generierten JavaScript Code der ASP Komponenten von DevExpress.

Meine Frage wäre die Folgende:
Gibt es eine andere sinnvolle Möglichkeit die Logik JavaScript-seitig abzubilden? - Also kann ich mit anderen (nativen) Events arbeiten und dabei die Logik erhalten? Hatte jemand schon ein ähnliches Problem?

Grüße, Fire

Ergänzung (31. Januar 2011)

Okay nach 5 Stunden debuggen, 6 Tassen Kaffee und ungefähr 25 Schimpfwörter:
-Done-

Problem war dass ich wohl recht hatte mit den Wechselwirkungen von den DevExpress Komponenten und JavaScript. Mein Event wurde überschrieben an einer Stelle an der es kein Geier erwartet hätte. Geholfen hat dies zu unterbinden und eine PreventDefault() Funktion an dem Event zu setzen. Jetzt läuft der Spass....