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

Android browser checkbox label not clickable

本文关键字：标签 浏览器 复选框 Android      更新时间：2023-09-26

我正在开发一个基于复选框破解的响应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的）破解。当我在Android 4.1.1平板电脑上测试时，菜单不会打开，但与IE8不同的是，问题不是伪类:checked，而是

  1. 点击关联的复选框标签不会切换复选框状态，并且
  2. JS快速修复程序模拟点击设置/取消设置复选框不起作用，因为浏览器将一次点击视为两次点击

不适用于android：

$('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变通方法，但无法使其发挥作用。

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

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

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

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

tap事件源于tocca.js，但也适用于click。

相关文章：