在搞Rails网站的那段时间就一直想做个小结,一直没来得及,这里把我所遇到的IE6 和Firefox兼容性的问题做以总结,里面也涉及一些Opera的东西,但是对Opera兼容接触的少,所以只是在查资料的时候顺便提了几点。由于我对Ajax应用的使用也不是很多,以下的内容基本都是来自于我们制作的网站www.bocai188.com/forum里面的登陆框制作碰到的问题(样式仿造的JavaEye的登陆框),没想到这个登陆框还真是麻雀虽小、五脏俱全,Firefox和IE之间的问题出现了不少常见的。具体的实现代码在我的另一篇日志中记录:http://yueguangyuan.iteye.com/blog/41511 附件代码下载即可运行测试效果。
一.屏蔽用户Enter键
,所 以这里就有了不同的处理方法,很多页面上需要屏蔽用户采用Enter键来执行动作,尤其是Struts中,如果对一个Text框出发Enter事件并采用 Submit提交,经常会出现问题,所以可以用以下的方式将其屏蔽掉,或者对于单独Text框做一个移动焦点的动作也可以。
- //键盘Enter事件屏蔽
- function onEnterClick(event){
- var eventObj=(event==null) ? window.event : event;
- var keyCode = (eventObj.which) ? eventObj.which : eventObj.keyCode;
- if(keyCode == 13){
- return false;
- }else{
- return true;
- }
- }
HTML页面调用时直接使用onkeydown方法触发onEnterClick(event)即可
这样就可以屏蔽掉,主要是两个差别:
A.event的获得方式 IE和Firefox下不同,由于IE和Opera把页面事件做为全局变量,直接用window.event就可以访问,而Firefox只有在出发事件的时候才能访问event,所以第三行代码就是针对不同浏览器获得event
B.keycode的获得方式 (信息来源地址:http://blog.tianya.cn/blogger/post_Date.asp?BlogID=666817&idWriter=0&Key=0&month=10&year=2006) 、Opera只支持keyCode属性,当事件是keydown和keyup时,keyCode属性返回的是数字代号,当事件是keypress时返回的是unicode字符。 而Firefox为keydown和keyup事件设了keyCode属性,为keypress事件设了CharCode属性。返回的结果同IE、Opera。IE
二、判断浏览器的方式:
这个东西在使用RIA框架之前还是满有用的,现在看来自己写这个东西麻烦、容易错,但是有助于了解IE和Firefox的差别(所以这个需要不断的积累):
1.isMSIE = (navigator.appName == "Microsoft Internet Explorer");
2.isFirefox= (window.event==null);
三、eventElement:
- function getEventElement (event){
- if(event == null){
- event = window.event;
- }
- return (event.srcElement ? event.srcElement : event.target);
- }
这里面的区别关键点:
A.event,同上面所述
B.获得对象方面,IE是event.srcElement,Firefox是event.target,Opera是两个都支持
四、获得相对坐标
- function getLeft(obj){
- if(isMSIE){
- value = obj.style.pixelLeft;
- }else{
- value = parseInt(obj.style.left, 10);
- }
- return value;
- }
在Firefox下面没有style.pixelLeft属性,取而代之的是style.left这种parseInt的处理方法,同样的处理适用于top属性
五、透明度
- function setOpcity(obj,value){
- // alpha(opacity=50)仅被IE支持
- if(isMSIE){
- obj.style.filter="alpha(opacity="+value+")";
- }else{
- obj.style.MozOpacity=value*0.01;
- }
- }
这个透明度两款浏览器显示处理方式有着很大的不同,估计再多来几种浏览器也会不同。
六、对于相对坐标的处理
- if(dragElement.parentNode.tagName != "BODY"){
- // 当选中可拖动元素时,初始化拖动元素的初始位置
- dragElement.style.left = (dragElement.offsetLeft + getLeft(dragElement.parentNode)) + "px";
- dragElement.style.top = (dragElement.offsetTop + getTop(dragElement.parentNode))+ "px";
- }