细说浏览器特性检测(1)-jQuery1.4添加部分

function addEvent(element, type, handler) { 
if (element.attachEvent) { //IE8及以下浏览器 
element.attachEvent('on' + type, handler); 
} 
else { //W3C标准浏览器 
element.addEventListener(type, handler, false); 
} 
};

函数可以通过检测attachEvent函数是否存在，以决定使用attachEvent或者addEventListener，这也是最简单的一种特性检测，因而通常在需要时才进行实时的检测。另一种特性检测由于检测的过程较为麻烦，因此会预先完成检测，将检测的结果（通常是Boolean类型）保存在某个变量中。

本文的主要目标是分析、说明在jQuery1.4中浏览器特性检测新增的内容，同时加深浏览器兼容性方面几个细节的记忆。

jQuery1.4主要增加了以下几个浏览器特性标识，本文针对它们一一进行分析：

checkOn

1.4版本引入，决定没有设置value值的checkbox是否有默认的value值”on”。

optSelected

1.4.3版本引入，决定select元素的第一个option元素是否会默认被选中。

optDisabled

1.4.3版本引入，决定当select元素设置为disabled后，其所有option子元素是否也会被设置为disabled。

checkClone

1.4.1版本引入，决定对DocumentFragment使用cloneNode函数时是否会将radio和checkbox的checked属性保留。

inlineBlockNeedsLayout

1.4.3版本引入，决定在IE下一个block元素拥有hasLayout属性并有display: inline;时，是否会按inline-block显示。

shrinkWrapBlocks

1.4.3版本引入，决定在IE下一个元素拥有hasLayout属性和固定的width/height时，是否不会被子元素撑大。

reliableHiddenOffsets

1.4.3版本引入，决定一个td或th元素设置为display: none;时，是否还有offsetHeight。

checkOn

使用以下代码可以检测该特性：

<input id="checkOn" type="checkbox" /> 
<script type="text/javascript"> 
alert(document.getElementById('checkOn').value); 
</script>

以下为各浏览器中运行结果：

经测试，除Chrome外，所有浏览器都会给没有value的checkbox一个默认的value值”on”。

该特性被jQuery用来获取checkbox和radio的值，兼容的判断语句如下：

//不支持checkOn的浏览器都不存在property/attribute混用问题，因此需要明确使用getAttribute 
return support.checkOn ? 
element.value : 
(element.getAttribute('value') === null ? 'on' : element.value);

optSelected

使用以下代码可以检测该特性：

<select id="optSelected"> 
</select> 
<script type="text/javascript"> 
var select = document.getElementById('optSelected'), 
option = document.createElement('option'); 
select.appendChild(option); 
alert(option.selected); 
</script>

以下为各浏览器中运行结果：

经测试，IE系列和Safari使用appendChild对空的select元素添加一个option后，该option的selected属性不会被默认设置为true。

该问题引起的BUG描述如下：

部分浏览器在获取option的selected属性时，会错误地返回false。

该问题的解决方案是在访问selected属性时，先访问其父级select元素的selectedIndex属性，强迫浏览器计算option的selected属性，以得到正确的值。需要注意的是option元素的父元素不一定是select，也有可能是optgroup。具体代码如下：

if (!support.optSelected) { 
var parent = option.parentNode; 
parent.selectedIndex; 
//处理optgroup时的情况 
if (parent.parentNode) { 
parent.parentNode.selectedIndex; 
} 
} 
return option.selected;

optDisabled

使用以下代码可以检测该特性：

<select id="optDisabled" disabled="disabled"> 
<option></option> 
</select> 
<script type="text/javascript"> 
var select = document.getElementById('optDisabled'), 
option = select.getElementsByTagName('option')[0]; 
alert(option.disabled); 
</script>

以下为各浏览器中运行结果：

经测试，Safari会将设置了disabled的select中的option也同样设置上disabled。

这个特性用来获取select元素的value值，特别是当select渲染为多选框时，需要注意从中去除disabled的option元素，但在Safari中，获取被设置为disabled的select的值时，由于所有option元素都被设置为disabled，会导致无法获取值。

因此有optDisabled（true表示option不会被自动设置disabled）后，可以有这样的代码：

//如果optDisabled为true，则disabled属性返回的是option的真实状态 
//否则判断disabled属性是否为null 
var disabled = support.optDisabled ? 
option.disabled : option.getAttribute('disabled') !== null; 
if (!disabled) { 
return option.value; 
}

checkClone

使用以下代码可以检测该特性：

<div id="checkClone"> 
<input type="radio" name="checkClone" checked="checked" /> 
</div> 
<script type="text/javascript"> 
var fragment = document.createDocumentFragment(), 
div = document.getElementById('checkClone'), 
radio = div.getElementsByTagName('input')[0]; 
fragment.appendChild( radio ); 
alert(fragment.cloneNode(true).cloneNode(true).lastChild.checked); 
</script>

需要注意的是，重现这个问题，需要给input显式地指定一个name属性，并且在复制fragment对象时连续调用2次cloneNode函数。

以下为各浏览器中运行结果：

由结果可以看出，该问题出现在Safari 4中，并且已经在Safari 5得到修复