`
accpxudajian
  • 浏览: 462343 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

IE和FF兼容性记录。

阅读更多

/*
IE下可以直接使用ID作为对象,但是FF下不可以。
譬如有一个id=mytxt的文本框,
IE下可以:var v = mytxt.value;
但是FF下不可以
*/


/*event 对象,*/
alert(event)

/*测试结果:
IE:[object]
Chrome :[object MouseEvent]
FF:undifiend
解决方案:在调用方法的时候 显式传递event作为参数。 如:
*/

var event = event|window.event;
alert(event);
/*测试结果:
IE是[object]
FF和Chrome:[object MouseEvent]
*/ 



/*2 
event.x 鼠标当前的坐标(不算滚动条滚动过的距离)
IE和Chrome有event.x,但是FF没有event.x
解决方案:用event.clientX代替event.x(evetnt.y同)
*/
alert(event.clientX) //三个浏览器都正常。

/*所以,在获取鼠标坐标是,为了实现IE和FF的兼容性,可以如下实现*/

var event =event||window.event;
var x=event.clientX;

/*添加事件处理的方法:*/
IE:element.attatchEvent("onclick",function(){/*....*/});
FF:element.addEventListener("click",function(){/*...*/})
通用模式:element.onclick=function(){/*将覆盖原来的onclick,具有局限性*/}


/*兼容方式:*/
var txtDom = document.getElementById("mydiv");
if(txtDom.attachEvent){
	txtDom.attachEvent("onclick",function(){
		alert("IE点击");
       })
}else if(txtDom.addEventListener){
	txtDom.addEventListener("click",function(){
		alert("FF点击");
	},true);/*第一个参数是click,区别于IE的onclick,true参数必须加上*/
}else{
	txtDom.onclick=function(){
		alert("onclick");/*此种写法将覆盖所有的已经绑定的onclick方法*/
      }
}
  


/*outerHTML
在FF下没有outerHTML,可以使用如下方法实现:
*/
var dom = document.getElementById("mydiv");
var parent = dom.parentNode;//父容器
var body = document.createElement("body");//创建临时body
body.appendChild(dom);//将dom添加到body中
var html = body.innerHTML;//打印body的innerHTML也就是dom的outerHTML			
parent.appendChild(dom);//由于使用了appendChild(dom),原父容器中的dom被删除,此处要还原dom
body=null;
alert(html);

/*创建body非常有用,可以发散思维一下*/
 

背景半透明:
- filter:alpha(opacity=80);-moz-opacity:0.8;

DOM设置/获取属性:
- setAttribute/getAttrbute
- 强烈要求使用标准函数设置/获取属性,以前我一直使用DOM.maname = "XX"设置自定义属性,后来发现,FF和Chrome不认识。

设置span不可被选中:
- IE:onselectstart="return false;"
- FF,chrome: -moz-user-select:none;/*ff:用户不可选中*/

















愤怒的jser -- 兼容就是强&奸前端程序员啊
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics