javascript - 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但无法让它工作。

最让我困惑的是，上述复选框 hack 示例适用于该平板电脑，但我的菜单(未发布)或这个简单的 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但也适用于点击。