整理浏览器对网页的兼容性问题-DOM事件(event)的使用

1.      IE下一般用document.body.onload = onload_func这样的方法注册onload响应事件函数，其中function onload_func()在这之前已经被实现，但是在FireFox下却无法执行; FireFox下一般用document.body.onload = onload_func()这样的方法。

解决办法：都采用window.onload = onload_func这种方法;或者都采用document.body.onload = new Function('onload_func'); 或者都采用document.body.onload = function(){/* … … */}。(注意Function与function的区别)

 

2.      FireFox的event只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：

原代码(可在IE中运行)：

<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/>

...

<script language="javascript">

function gotoSubmit(){ ...

alert(window.event);                 // use window.event ...

}

</script>

 

新代码(可在IE和FireFox中运行)：

<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/> ...

 

<script language="javascript">

function gotoSubmit(evt) {

evt = evt ? evt : (window.event ? window.event : null);...

alert(evt);                  // use evt ...

}

</script>

此外，如果新代码中第一行不改，与原代码相同的话(即gotoSubmit调用没有给参数)，则仍然只能在IE中运行，但不会报错。

 

3.      在IE中，event对象有x、y两属性，FireFox中没有;相对的在FireFox中，event对象有pageX、pageY两属性，IE中没有。

 

解决办法：用event.clientX、event.clientY代替，缺陷是在页面中存在滚动条时与pageX、pageY有细微差别；或者用如下方法代替：

pgX = event.x ? event.x : event.pageX;

pgY = event.y ? event.y : event.pageY;

可取得无差别数值。

 

4.      在IE中event对象有srcElement属性,但是没有target属性; 在Firefox中event对象有target属性,但是没有srcElement属性

 

解决办法：用obj = event.srcElement ? event.srcElement : event.target;来代替IE下的event.srcElement或者Firefox下的event.target,请同时注意event的兼容性问题。

 

5.      添加事件捕获         IE中：obj.setCapture()、obj.releaseCapture()

FireFox中：document.addEventListener( "mousemover",mousemovefunction,true);

document.removeEventListener( "mousemove ",mousemovefunction,true);

6.      禁止选取网页内容         IE中用JS：obj.OnSelectStart=function(){return false;}

FireFox中用CSS：-moz-user-select:none