Android瀏覽器複選框標籤不能點擊

我正在基礎上，checkbox hack Android瀏覽器複選框標籤不能點擊

HTML一個響應CSS菜單上的工作：

<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但事實上，

竊聽相關的複選框標籤不切換複選框狀態和
一個JS速戰速決，模擬點擊設置/取消複選框不工作作爲瀏覽器看到一個click as two clicks

在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 workaround using timestamps，但無法使其正常工作。

最令我感到困惑的是，上述的複選框hack示例適用於該平板電腦，但我的菜單（未發佈）或此簡單form with checkboxes不會更改標籤單擊上的複選框。

任何想法，我錯了，或如何使android 4.1.1設置/取消設置複選框沒有嵌套複選框內的標籤（我需要同一個複選框的多個標籤）？即使重點僅僅是CSS，我也可以用JS解決方案。由於

來源

2014-09-04 rotezecke

我結束了使用此解決方法：

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

敲打事件從tocca.js莖，但還與點擊。

來源

2014-10-02 23:23:49 rotezecke

嗨，謝謝你！在我的Android手機上，只需添加下面的CSS，就可以解決標籤無法正常打開的問題。 body {-webkit-animation：bugfix infinite 1s; } @ -webkit-關鍵幀修正錯誤{{從填充：0;}到{填充：0;}} 你認爲這是所有的需要，或者我應該添加你必須支持舊的Android版本的jQuery代碼？ – user1610904 2015-04-22 20:35:33

我放棄了複選框黑客攻擊，發生了更多問題，主要是各種Android設備。該CSS也造成上看到Safari瀏覽器海量內存泄漏。我最後寫的各種問題，使很多jQuery的修復，我定居在最後一個jQuery菜單。 – rotezecke 2015-04-23 23:57:21

Android瀏覽器複選框標籤不能點擊

回答

相關問題