Golbym!: Mobile Safari の Label 要素挙動覚え書き

iPhone/iPad/iPod touch の Mobile Safari は、デフォルトでは label 要素をタップしても関連付けたフォームフィールドの click イベントを代行しない。つまり、<label for="checkbox1"> などと指定しても、label タップで checkbox1 の選択状態は変化しない。

これを fix するために、ページロード時などに予め各 label の click イベントへ何らかの function をバインドする（function がバインドされてさえいれば良いので、特に何か処理をする必要はない）。この挙動は iOS だけでなく Android の WebKit 系ブラウザでも同様みたい。

コード例

var fn = function(){};

(function(b) {
  b.onload = function() {
    Array.prototype.slice.apply(b.querySelectorAll('label[for]')).forEach(function(l) {
      l.onclick = l.onclick || fn;
    });
    b = null;
  };
})(document.body);

/* jQuery や zepto.js、jqMobi を使った場合 */
$(function() {
  $('label[for]').on('click', fn);
});

こちらの検証ページを Mobile Safari で開くと、text2 の label 以外は fix されているはず。