IE8 中的 JavaScript 事件原型

Question

I'm trying to add a method to the Event prototype. In order to call/set preventDefault() or, in IE-speak returnValue = false and -if desired- stopPropagation() / cancelBubble = true; . I thought the code below would have sufficed.

Event = Event || window.Event;
//^^ makes the fiddle work on IE8 ^^
if(!(Event.prototype.stopEvent))
{
    Event.prototype.stopEvent = function(propagate)
    {
        "use strict";
        propagate = (propagate ? true : false);
        if (this.preventDefault)
        {
            this.preventDefault();
            if (propagate === false)
            {
                this.stopPropagation();
            }
        }
        else
        {
            this.returnValue = false;
            this.cancelBubble = !propagate;
        }
        return this;
    };
}

Which seems to work, as you can see here . This fiddle shows OK in IE8, firefox and chrome. Though, when I add this to my script, IE8 breaks on the first line, saying 'Event is undefined' . Leaving out "use strict"; makes no difference at all.

Reluctantly, I tried this, too:

if (typeof Event === 'undefined')
{
    var Event = window.Event || window.event;//FFS IE :-(
}

But to no avail: Error: 'Event.prototype' is null or not an object , so I got 1 line further. The thing is, the entire prototype method is a copy paste from my script, but what am I overlooking here? Any idea's/suggestions?
Thanks

PS: I like Pure JavaScript, so please, don't suggest jQuery, prototypejs, dojo,... as a solution. I've just gotten rid of jQuery. (I like jQuery, but there is no need for it in this case)

---

Update

Things have taken a turn for the worse, I'm afraid. I found this MSDN reference . The entire page deals with DOM Element prototypes. It's pretty fair to say they are available and usable in IE8 (to some extent). On this page, this code caught my eye:

Event.prototype.stopPropagation = function ()
{
  this.cancelBubble = true;
};
Event.prototype.preventDefault = function ()
{
  this.returnValue = false;
};

It can be found ~3/4ths of the page down, in the section titled "Powerful Scenarios" . This is, to my mind exactly the same thing as I want to do, but what's more: if I try this code via jsfiddle, it doesn't even work, whereas my jsfiddle (with my code) did work on IE8. This is just the last few lines of a snippet, but as far as I can work out, these few lines of code should work just fine. I've altered them as follows:

Event.prototype.stopPropagation = function ()
{
    if (this.stopPropagation)
    {
        return this.stopPropagation();
    }
    this.cancelBubble = true;
};
Event.prototype.preventDefault = function ()
{
    if (this.preventDefault)
    {
        return this.preventDefault();
    }
    this.returnValue = false;
};

Answer 1

I recently had (another) brainwave, and I think I found a better way of augmenting the event prototype. Strictly speaking, the Event prototype is not accessible in IE (<9), but it is, I found out accessible if you work your way back from an instance (well, the instance: window.event ). So here's a snippet that works in all major browsers (and IE8 - not 7):

(function()
{
        function ol(e)
        {//we have an event object
            e = e || window.event;
            if (!e.stopEvent)
            {
                if (Object && Object.getPrototypeOf)
                {//get the prototype
                    e = Object.getPrototypeOf(e);
                }
                else
                {//getting a prototype in IE8 is a bit of a faff, this expression works on most objects, though
                 //it's part of my custom .getPrototypeOf method for IE
                    e = this[e.constructor.toString().match(/(function|object)\s+([A-Z][^\s(\]]+)/)[2]].prototype;
                }
                e.stopEvent = function(bubble)
                {//augment it (e references the prototype now
                    bubble = bubble || false;
                    if (this.preventDefault)
                    {
                        this.preventDefault();
                        if (!bubble)
                        {
                            this.stopPropagation();
                        }
                        return this;
                    }
                    this.returnValue = false;
                    this.cancelBubble = !bubble;
                    return this;
                };
            }
            alert(e.stopEvent ? 'ok' : 'nok');//tested, it alerts ok
            if (this.addEventListener)
            {
                this.removeEventListener('load',ol,false);
                return;
            }
            document.attachEvent('onkeypress',function(e)
            {
                e = e || window.event;
                if (e.stopEvent)
                {//another event, each time alerts ok
                    alert('OK!');
                }
            });
            this.detachEvent('onload',ol);
        }
        if (this.addEventListener)
        {
            this.addEventListener('load',ol,false);
        }
        else
        {
            this.attachEvent('onload',ol);
        }
})();

That way, the header doctype doesn't matter all that much: I've tested it using the <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> , and it works in FF, chrome and IE 8, no problems whatsoever. Using <!DOCTYPE html> to be safe, though

Hope this helps someone...

Answer 2

Its Standards versus Quirks mode. The JSFiddle page has a DOCTYPE declaration, albeit an incredibly simple one, <!DOCTYPE html> , that kicks the render into Standards mode. Chances are your web page does not have a DOCTYPE which leaves the render in Quirks mode. After adding that simple DOCTYPE to a page I built from your fiddle, it worked for me.