Javascript跨浏览器脚本

Question

我有一个小函数，我只允许输入数字。它在 IE 中运行良好，但我无法在 FireFox 或 Chrome 中运行。我在我的 HTML 页面的脚本标签中加载了这个 js 文件。

var numberOnly = function(evt) { 

  var theEvent = evt || window.event; 
  var key = theEvent.keyCode || theEvent.which; 
  key = String.fromCharCode( key ); 
  var regex = /[0-9]|\./; 
  if( !regex.test(key) ) { 
    theEvent.returnValue = false; 

 } 
}; 

var wireElemToEvent = function(elemId, event, func){

var elem = document.getElementById(elemId);
if (typeof window.event !== 'undefined') {
    elem.attachEvent("on" + event, func);
} else {
    elem.addEventListener(event, func, true);
}
};



var wireEvents = function(){

wireElemToEvent("tbxQuantity", "keypress", numberOnly);
wireElemToEvent("tbxPhone", "keypress", numberOnly);
wireElemToEvent("tbxZip", "keypress", numberOnly);


};

window.onload = wireEvents;

Chrome 告诉我

file:///C:/Documents%20and%20Settings/xxx/Desktop/numbersonly/res/js/numbersonly.js:17Uncaught TypeError: Object # has no method 'attachEvent'

知道我做错了什么吗？

Answer 1

在wireElemToEvent 中，您可能需要在初始化elem 后检查它是否为空。另外，最好检查elem.attachEvent和elem.addEventListener的存在，而不是window.event是否被定义。

Answer 2

这是我用来跨浏览器附加事件的函数：

 function eventListen( t, fn, o ) {
  o = o || window;
  var e = t+fn;
  if ( o.attachEvent ) {
   o['e'+e] = fn;
   o[e] = function(){
    o['e'+e]( window.event );
   };
   o.attachEvent( 'on'+t, o[e] );
  }else{
   o.addEventListener( t, fn, false );
  }
 }

并使用它：

eventListen('message', function(e){
 var msg = JSON.parse(e.data);
    ...
});

Answer 3

我遇到了同样的问题，因为我是新手，所以一直在四处寻找解决方案。 显然 (typeof window.event !== 'undefined') 不会阻止 Safari/Chrome 进入该 if 语句。所以它实际上初始化了 attachEvent 并且不知道如何处理它。

解决方案：

var wireElemToEvent = function(elemId, event, func){

var elem = document.getElementById(elemId);
if (elem.attachEvent) {
    elem.attachEvent("on" + event, func);
} 
else { // if (elem.addEventListener) interchangeably
    elem.addEventListener(event, func, true);
}
};

Answer 4

使跨浏览器脚本编写更容易的一个好方法是使用jQuery。另外，没有理由重新发明轮子。为什么不试试这个 jQuery 插件：jQuery » numeric