Android浏览器复选框标签不可点击

Question

我正在开发基于 checkbox hack 的响应式 CSS 菜单

html:

<input type="checkbox" id="button" />
<label for="button" onclick>click / touch</label>

<div>
 Change my color!
</div>

css:

/* Advanced Checkbox Hack */

body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

input[type=checkbox] {
 position:absolute;
 top:-9999px;
 left:-9999px;
}

label { 
 cursor: pointer;
 user-select: none;
}

div {
 background-color: #00F;
}

/* checked */
input[type=checkbox]:checked ~ div {
 background-color: #F00;
}

运行良好，有效的 html5 并在 windows 和 linux 桌面（FF、IE、Opera、Konquerer、Chrome、Maxthon）上成功测试，我什至想出了一个针对 IE8 的简短（基于 JS）的 hack。当我在 Android 4.1.1 平板电脑上测试时，菜单无法打开，但与 IE8 不同，问题不在于伪类 :checked，而是

1. 点击关联的复选框标签不会切换复选框状态，并且
2. 一个 JS 快速修复来模拟单击以设置/取消设置复选框不起作用，因为浏览器看到一个 click as two clicks

不适用于安卓：

$('label').click(function(e) {
 e.preventDefault();
 // alert(navigator.userAgent);
 $("input#button").trigger('click'); 
});

为了保持理智，我测试了

$('label').click(function(e) {
 e.preventDefault();
 // alert(navigator.userAgent);
 $("input#button").prop("checked",true); 
});

这可行，但当然只设置复选框，从不取消设置。

我尝试了JS workaround using timestamps，但无法正常工作。

最让我困惑的是，上述复选框黑客示例适用于上述平板电脑，但我的菜单（未发布）或这个简单的form with checkboxes 不会更改标签点击时的复选框。

知道我哪里出错了，或者如何让 android 4.1.1 设置/取消设置复选框而不将复选框嵌套在标签内（我需要多个标签用于同一个复选框）？我可以接受 JS 解决方案，即使重点是仅使用 CSS。谢谢

Answer 1

我最终使用了这个解决方法：

$('.touch .menu label').on('tap', function(e) { 
  e.stopPropagation(); 
  e.preventDefault();
  var hID = $(this).prop('for');
  $("input#"+hID).trigger('click'); /* not tap */
});

点击事件源自tocca.js，但也适用于点击。