我正在尝试向事件原型添加一个方法。为了调用/设置preventDefault()
,或者在IE中说returnValue = false
和-如果需要-stopPropagation()
/cancelBubble = true;
。我认为下面的代码就足够了。
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,火狐和铬的OK
。但是,当我将其添加到脚本中时,IE8 在第一行中断,说"事件未定义"。忽略"use strict";
根本没有区别。
不情愿地,我也尝试了这个:
if (typeof Event === 'undefined')
{
var Event = window.Event || window.event;//FFS IE :-(
}
但无济于事:Error: 'Event.prototype' is null or not an object
,所以我又得到了 1 行。问题是,整个原型方法是我的脚本中的复制粘贴,但我在这里忽略了什么?任何想法/建议?
谢谢
PS:我喜欢纯JavaScript,所以请不要建议jQuery,prototypejs,dojo,...作为解决方案。我刚刚摆脱了jQuery。(我喜欢jQuery,但在这种情况下不需要它(
更新
恐怕事情已经变得更糟了。我找到了这个 MSDN 参考。整个页面涉及 DOM 元素原型。可以公平地说,它们在IE8中可用且可用(在某种程度上(。在这个页面上,这段代码引起了我的注意:
Event.prototype.stopPropagation = function ()
{
this.cancelBubble = true;
};
Event.prototype.preventDefault = function ()
{
this.returnValue = false;
};
它可以在标题为 "Powerful Scenarios"
的部分中找到页面下方的 ~3/4。在我看来,这与我想做的事情完全相同,但更重要的是:如果我通过 jsfiddle 尝试这段代码,它甚至不起作用,而我的 jsfiddle(带有我的代码(确实在 IE8 上工作。这只是片段的最后几行,但据我所知,这几行代码应该可以正常工作。我按如下方式更改了它们:
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;
};
我最近有(另一个(脑电波,我想我找到了一种更好的方法来增强事件原型。严格来说,Event
原型在IE(<9(中无法访问,但是,如果您从实例(好吧,实例:window.event
(返回,我发现可以访问它。所以这里有一个适用于所有主要浏览器(和IE8 - 而不是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 html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
对其进行了测试,它可以在 FF、chrome 和 IE 8 中工作,没有任何问题。不过,使用<!DOCTYPE html>
是安全的
希望这对某人有所帮助...
其标准与怪癖模式。JSFiddle页面有一个DOCTYPE声明,尽管这是一个非常简单的声明,<!DOCTYPE html>
,它将渲染启动到标准模式。您的网页可能没有 DOCTYPE,这会让渲染处于 Quirks 模式。将那个简单的 DOCTYPE 添加到我用你的小提琴构建的页面后,它对我有用。