javascript - trick to fix the event object

Many browsers, especially Internet Explorer, miss out on a number of the W3C event object properties

and methods. The only reasonable way to work around this is to create a new object that simulates the

browser's native event object, fixing issues on it where appropriate (it's not always possible to modify the existing object, many properties can't be overwritten).

 

The details of what to fix is embedded in the comment itself. please have a read.

 

/**************************************
*@Name: expandoattr.js
*@Summary
*  Many browsers, expecialy Internet explorerr, miss out a number of W3C event object 
* proeprties and methods, The only reasonale way to wrk this is to create a new object that simulate 
* the browse's native event object. fixing issues on it where appropriate (it's not always possible to modify the
* existing object, many properties can't be overwritten).
*
* some uniformly named 
*   .target - the commonly-use property denoting the original source of the event, IE frequently stores this in .srcElement
*   .relatedTarget - relatedTargt comes into the use when it's used on an event in conjunction with another element (such as "mouseover" or "mouseout"). The .toElement and .fromElement are IE's counterparts
*   .preventDefault - dosn't exist in the IE implementaion , which would normally prevetnt the default browser acton from occuring, instead the .returnValue property needs to be set to false
*   .stopPropagation() - alsoes does not exit, which would normally stop the event from bubbling further up the treee, setting the .canceBubble property to true will make this happen
*   .pageX() - page X and pageY does not exist in IE (provide he position of the mouse relative to the while document) but can be easily duplicated using other information (clientX/Y provides the position of the mouse relative to teh window 
*              of the document, and clientTop/Left gives the offset of the document itself - combining these value will give you the final pageX/Y values).
*   .pageY()
*   .which   - .is equivalent to the key code pressed duing a keyboard event, this cn be duplicated by accessing the .charCode and the .keyCode properties
*   .button - matches the mouse button clicked by the user on a mouse event. Internet explorer uses a bitmask (1 for left client, 2 for right click for middle click) so it needs to be converted to their equivalent values (1, 2,3 )
*   .
* @todo:
*   Test
***************************************/

function fixEvent(event) {
  
  if (!event || !event.stopPropagation) {
    var old = event || window.event;
    // Clone the old object so that we can modify the values
    event = {};
    for (var prop in old) {
      event[prop] = old[prop];
    }
    // The event occurred on this element
    if (!event.target) {
      event.target = event.srcElement || document;
    }
    // Handle which other element the event is related to
    event.relatedTarget = event.fromElement === event.target ?
        event.toElement :
        event.fromElement;
    // Stop the default browser action
    event.preventDefault = function () {
      event.returnValue = false;
      event.isDefaultPrevented = returnTrue;
    };
    event.isDefaultPrevented = returnFalse;
    // Stop the event from bubbling
    event.stopPropagation = function () {
      event.cancelBubble = true;
      event.isPropagationStopped = returnTrue;
    };
    event.isPropagationStopped = returnFalse;
    // Stop the event from bubbling and executing other handlers
    event.stopImmediatePropagation = function () {
      this.isImmediatePropagationStopped = returnTrue;
      this.stopPropagation();
    };
    event.isImmediatePropagationStopped = returnFalse;
    // Handle mouse position
    if (event.clientX != null) {
      var doc = document.documentElement, body = document.body;
      event.pageX = event.clientX +
        (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
        (doc && doc.clientLeft || body && body.clientLeft || 0);
      event.pageY = event.clientY +
        (doc && doc.scrollTop || body && body.scrollTop || 0) -
        (doc && doc.clientTop || body && body.clientTop || 0);

    }
    // Handle key presses
    event.which = event.charCode || event.keyCode;
    // Fix button for mouse clicks:
    // 0 == left; 1 == middle; 2 == right
    if (event.button != null) {
      event.button = (event.button & 1 ? 0 :
        (event.button & 4 ? 1 :
        (event.button & 2 ? 2 : 0)));
    }
  }
  return event;
  function returnTrue() { return true; }
  function returnFalse() { return false; }
}