iOS 5 Mobile Safari中label的bug

iOS 5 Mobile Safari中label的bug

前几天在codepen上看到了不错CSS用法，今天打算在写新博客的时候使用类似的思路：

用input[type=checkbox]来控制同级元素的样式，实现只用CSS来修改样式状态的特性。

做的时候发现iOS 5下此demo无法用，于是发现了label元素的一个bug。我们在写表单的时候，为了实现点击label自动选中input，一般会这么做：

<label for="email">Email</label>
<input type="text" id="email"/>

这样当用户点击Email文字时，输入框会自动选中，以提高用户体验。但是如果input是checkbox呢？

<label for="sure">Sure</label>
<input type="checkbox" id="sure"/>

此时在iOS 5中，点击文字Sure，checkbox不会自动勾选！搜索之后得到解决方案：为label加个onclick属性，它就可以正常触发input[type=checkbox]了。

<label for="sure" onlcick>Sure</label>
<input type="checkbox" id="sure"/>

本来以为OK了，于是写了个测试用例。却发现还需要另外一个条件才能触发label的行为。而且这不仅仅针对checkbox，对所有的input都需要这两个条件：

1. label有onclick属性（即绑定了click事件），或者是它的父元素绑定了click事件。
2. label的css cursor值必须是pointer

另外有个注意点：不同的父元素绑定click又会有影响。如果是document.body绑定，那么手指按下的时候label会有样式上的变化（onclick也有此效果）。如果是一般的父div则没有此效果。

猜测此bug同样影响了iOS 5上的其他浏览器（注：这里只测试了Chrome）。iOS6上已经修复了此bug。因为手头没有设备，故没有测试iOS5之前版本是否有此bug。

最后fork修改原来codepen上的demo，Check it out～ http://codepen.io/zmmbreeze/pen/AaLFJ。