Web浏览器兼容性整理

文档类型定义（DTD）

浏览器会有几种工作模式，而DTD里面包含了文档的规则，浏览器会根据文档定义的DTD来解释页面的标识，并展现出来。换句话说, DTD告诉浏览器工作在不同的模式下。

DOCTYPE是document type(文档类型)的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。

DOCTYPE声明对于建立符合标准的网页是必不可少的关键组成部分；如果DOCTYPE不正确，标识和CSS都不会生效。

DTD分类:

过渡的(Transitional)：是要求非常宽松的DTD。一般的情况下网页中会使用此DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml 的写法)。
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```
严格的(Strict)：要求严格的DTD。对页面的标签使用非常严格，页面里几乎不准使用 inline-style 的 CSS 样式。
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```
框架的(Frameset)：专门针对框架页面设计使用的DTD。以前Table 满街走的年代很流行这种DTD，如果你的页面中包含有框架，需要采用这种DTD。
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
```

适用于手机浏览器的DTD：用于移动端开发。

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

怎么选择DOCTYPE?

理想情况当然是严格的DTD，但对于大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。

注：上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag。例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的，而不是用来实现表现形式，我们过渡的目的是最终实现数据和表现相分离。

判断页面有没有DTD (compated属性问题)

document.compatMode === "BackCompat" 
  BackCompat 未声明的返回值
  CSS1Compat 已经声明的返回值

1. 事件对象

获取事件对象 event。

W3C火狐谷歌   : event 或者 在事件绑定的函数中加参，这个参数就是event.
IE6、7、8 支持： window.event（不支持带参）

function (event){
   var event = event || window.event;
   // 对事件进行操作
}

获取事件的目标 target。

W3C 浏览器:  event.target
IE6、7、8 :  event.srcElement
兼容写法:  
var target = event.target || event.srcElement;
var target = event.target? event.target: event.srcElement;

2. 获取屏幕可视区的宽高

W3C  规  定     : window.innerWidth  和  window.innerHeight
谷歌支持声明DTD  : window.documentElement.clientWidth 和 window.documentElement.clientHeight
IE支持未声明DTD  : window.body.clientWidth 和 window.body.clientHeight
兼容写法: 
 
function client(){
   if(window.innerHeight !== undefined){  // 如果浏览器支持innerHeight属性
       return {
           "width" : window.innerWidth,
           "height": window.innerHeight
       }
   }else if( document.compatMode === "CSS1Compat"){  // 如果浏览器声明了DTD
       return {
           "width" : window.documentElement.clientWidth,
           "height": window.documentElement.clientHeight
       }
   }else{
       return {
           "width" : window.body.clientWidth,
           "height": window.body.clientHeight
       }
   }

}

3. 获取被卷曲的部分

function scroll(){
   if( window.pageYOffset !== undefined){
        return {
            "top" : window.pageYOffset ,
            "left": window.pageXOffset
        }
   }else if( document.compatMode ==="CSS1Compat"){
        return {
            "top" : window.documentElement.scrollTop ,
            "left": window.documentElement.scrollLeft
        }
   }else{
        return {
            "top" :  window.body.scrollTop,
            "left":  window.body.scrollLeft
        }
   }
}

或者简写:
function scroll(){
     /*
      * 如果这个属性存在,那么返回值 应该在 0 ~ 无穷大;
      * 如果没有, 返回值则是 undefined.
      * 只要判断 不是undefined 就可以调用此方法.
      */
    if(window.pageYOffset !== undefined){
        return{
           "top" : window.pageYOffset || documnet.body.scrollTop || documnet.documentElement.scrollTop;
           "left" : window.pageXOffset || documnet.body.scrollLeft || documnet.documentElement.scrollLeft;
        }
    }
}

4. 光标在页面中的位置

pageX 和 pageY 兼容性不好。
兼容写法:

鼠标在页面中的位置 = 被卷曲的部分 + 可视区部分。
pagex = event.pageX || scroll().left + event.clientX;
pagey = event.pageY || scroll().top + event.clientY;

5.取消/阻止事件冒泡

不冒泡的事件有: blur 、focus、load、unload、onmouseenter、onmouseleave

判断事件是否冒泡 : event. bubbles 属性

document.onclick = function(event){
   event = event || window.event;
   console.log( event.bubbles);
   // 返回true则说明事件冒泡;否则不冒泡。
}

取消/阻止事件冒泡:

W3C浏览器: 通过stopPropagation()方法阻止冒泡
IE6、7、8: 通过cancelBubble属性控制是否阻止冒泡

document.onmouseenter = function(event){
    var event = event || window.event;
    if( event && event.cancelBubble){
        event.cancelBubble = true;
    }else{
        event.stopPropagation();
    }
  
}

6.跨浏览器的事件处理程序

使用EventUtil对象来处理浏览器间的差异性。

var EventUtil = {
   addHandler : function(element, type, handler){
       if ( element.addEventListener){
           element.addEventListener(type, handler, false);
       }else if( element.attachEvent){
           element.attachEvent("on" + type , handler);
       } else{
           element["on"+type] = handler;
       }
   },
   removeHandler : function(element, type, handler){
       if( element.removeEventListener){
           element.removeEventListener(type, handler, false);
       }else if(element.detachEvent){
           element.detachEvent("on"+type, handler);
       }else{
           element["on"+type] = null;
       }
   }
}

7.跨浏览器的事件对象

var EventUtil = {
   addHandler: function( element, type, handler){},
   getEvent: function(event){
       return event?event: window.event;
   },
   getTarget: function(event){
       return event.target || event.srcElement;
   },
   preventDefault : function(event){
       if( event.preventDefault){
           event.preventDefault();
       }else{
           event.returnValue = false;
       }
   },
   removeHandler: function( element, type, handler){},
   stopPropagation: function(event){
       if(event.stopPropagation){
           event.stopPropagation();
       }else{
           event.cancelBubble = true;
       }
   }

}

8.鼠标滚轮事件

W3C浏览器: mousewheel      属性event.wheelDelta >0向上滚动
Foirefox: DOMMouseScroll  属性event.detail <0 向上滚动
JQuery中: event.originalEvent.wheelDelta就是指向原始的事件对象。

JQuery中兼容写法:
$(document).on("mousewheel DOMMouseScroll", function (e) { 
    var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));             
    //var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0); //合并写法
    if (delta > 0) {
        // 向上滚
        console.log("wheelup");
    } else if (delta < 0) {
        // 向下滚
        console.log("wheeldown");
    }
});
判断Firefox：(除了使用userAgent属性)
if( document.mozHidde != undefined){
    //此为firefox 
}