(原创)JS兼容性笔记(更新)

一. element.setAttribute 与 element.className

我们通过Js脚本对DOM 节点进行修改其样式class的时候，有几种方式进行操作：

1.element.setAttribute（'className','xxxClass'）;//仅对IE有效

2.element.setAttribute（'class','xxxClass'）;//仅对FF有效

3.element.className = 'xxxClass';//兼容IE与FF

当然我们可以通过判断浏览器来实现兼容如：

if(document.all) {
    element.setAttrbute('className', 'xxxClass');
} else {
    element.setAttrbute('class', 'xxxClass');
}

 

 

推荐第3种写法。

二.event事件

如果我们需要用到一个兼容IE和FF的JS事件，我们可以利用下面这段代码，这在很多需要做事件处理的JS代码中非常有用。

 

//格式化事件
function getEvent(){
     //同时兼容ie和ff的写法
     if(document.all)    return window.event;
     func=getEvent.caller;
     while(func!=null){
         var arg0=func.arguments[0];
         if(arg0){
             if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
                || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){
                return arg0;
              }
         }
          func=func.caller;
        }
        return null;
}

你可以用var event=getEvent();来获得一个兼容IE与FF的事件，比如如下这段兼容IE与FF的拖拽代码中可以用到它：

 

//拖拽
//对“拖动点”定义：onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)"即可
var move=false,_X,_Y;
function StartDrag(obj,winId){  //定义准备拖拽的函数
    var event=getEvent();
    //同时兼容ie和ff的写法
    if (!window.captureEvents) {
        obj.setCapture(); //对当前对象的鼠标动作进行跟踪
    }else {
        window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    }
    move=true;
    //获取鼠标相对内容层坐标
    var pos=jQuery('#'+winId).position();
    jQuery('#'+winId).fadeTo(0,0.8);

    _X=pos.left-event.clientX;
    _Y=pos.top-event.clientY;
}
function DragWin(obj,winId){        //定义拖拽函数
    var event=getEvent();
    if(move){
        var parentwin=jQuery('#'+winId);
        var left_x;
        var top_y;
        if(event.clientX+_X < 0) {
            left_x = 0;
        } else if (event.clientX+_X > document.documentElement.clientWidth-$("#"+winId).width()) {
            left_x = document.documentElement.clientWidth-$("#"+winId).width();
        } else {
            left_x = event.clientX+_X;
        }
        if(event.clientY+_Y < document.documentElement.scrollTop) {
            top_y = document.documentElement.scrollTop;
        } else if (event.clientY+_Y > document.documentElement.scrollTop+document.documentElement.clientHeight-$("#"+winId).height()) {
            top_y = document.documentElement.scrollTop+document.documentElement.clientHeight-$("#"+winId).height();
        } else {
            top_y = event.clientY+_Y;
        }
        parentwin.css("left",left_x);
        parentwin.css("top",top_y);
    }
}
function StopDrag(obj,winId){   //定义停止拖拽函数
    //同时兼容ie和ff的写法
    if (!window.captureEvents) {
        obj.releaseCapture(); //停止对当前对象的鼠标跟踪
    }else {
        window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    }
    jQuery('#'+winId).fadeTo(0,1);
    move=false;
}

 

 

 

先留篇文档，便于更新记录日常工作中解决的浏览器兼容问题。