IE8中的JavaScript事件原型 [英] JavaScript Event prototype in IE8
问题描述
我正在尝试向Event原型添加方法。为了调用/设置 preventDefault（），或者在IE中说 returnValue = false 和-if desired- stopPropagation（） / cancelBubble = true; 。我认为下面的代码已经足够了。
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;
};
}
这似乎有用，正如你在这里看到的那样。这个小提琴在IE8，firefox和chrome中显示确定。但是，当我将其添加到我的脚本时，IE8在第一行中断，说'事件未定义'。离开使用严格; 完全没有任何区别。
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 :-(
}
但无济于事： 错误：'Event.prototype'为null或者不是对象，所以我得到了1行。问题是，整个原型方法是我脚本的复制粘贴，但是我在这里忽略了什么？有什么想法/建议吗？
谢谢
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：我喜欢Pure JavaScript，所以请不要建议jQuery ，prototypejs，dojo，...作为解决方案。我刚刚摆脱了jQuery。（我喜欢jQuery，但在这种情况下没有必要）
更新
事情变得更糟，我我很害怕。我发现这个MSDN参考。整个页面处理DOM Element原型。可以说它们在IE8中可用并且可用（在某种程度上）。在这个页面上，这段代码引起了我的注意：
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;
};
在页面标题为<$ c $的部分可以找到~3 / 4的页面c>强大的场景。在我看来，这与我想做的完全相同，但更重要的是：如果我通过jsfiddle尝试这个代码，它甚至不起作用，而我的jsfiddle（使用我的代码）确实可以在IE8上运行。这只是片段的最后几行，但就我可以解决而言，这几行代码应该可以正常工作。我已将它们修改如下：
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;
};
推荐答案
我最近有（另一个）脑波，我认为我发现了一种更好的方法来增强事件原型。严格地说，事件原型在IE（< 9）中无法访问，但是，如果你从一个实例回来的话，我发现它是可访问的（好吧，实例： window.event ）。所以这里有一个适用于所有主流浏览器的片段（和IE8 - 而不是7）：
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);
}
})();
这样，标题doctype并不重要：我已经使用了<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd > ，它适用于FF，Chrome和IE 8，没有任何问题。使用<！DOCTYPE html> 是安全的，但
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...
这篇关于IE8中的JavaScript事件原型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
