2011-09-09 124 views
29

在移動Safari

document.getElementById("test_label").onclick = function() {}; 

解決了這個問題。

這是完整的源代碼。

<body> 
    <input type="checkbox" id="test" name="test"> 
    <label for="test" id="test_label">This is the label</label> 
    <script> 
     document.getElementById("test_label").onclick = function() {}; 
    </script> 
</body> 

你知道它爲什麼有效嗎?

+0

你能發佈你的html嗎? 是否 '' – mplungjan

+0

感謝您的提問。正在尋找一個解決方法,該錯誤。這onclick救了我:)如果你在https://bugreport.apple.com/提交了一個錯誤,讓我們知道他們回答你。 – RaphaelDDL

+1

[將標籤元素的光標屬性設置爲指針](http://stackoverflow.com/a/5560077)#wtf –

回答

13

它看起來像你在iOS Safari中發現一個錯誤。恭喜!發現和報告錯誤是令人上癮的。

您可以通過https://bugreport.apple.com/向Apple報告此錯誤和其他錯誤。 Apple可能無法立即跟進,但在將來的某個時刻,他們應該通知您這是一個現有錯誤的重複,他們不認爲它是一個錯誤,或者(如果您幸運的話)您應該測試它再次在iOS的新版本中。

與此同時,堅持這種解決方法 - 你需要它。

+2

Yay!我愛野生動物園:) –

+0

真的嗎?您不能成爲網絡開發人員;) – DarkNeuron

24

我們能夠在Etsy上解決這個問題,只需將這一行代碼添加到我們的全局JavaScript文件。

$('label').click(function() {}); 

我們使用XUI微JS庫和該行只是附加一個空單擊處理所有label元素。出於某種原因,這神奇地解決了移動Safari瀏覽器的問題。

+2

在iOS 7上,我仍然遇到類似的問題。無法在'label'標籤上觸發'click'。奇怪,非常非常令人沮喪。 – Dex

0

如果已經有一個onclick屬性,不應該覆蓋它,並在我的測試中,它的工作(onclick屬性),並點擊複選框。所以我的解決辦法是:

<script type="text/javascript"> 
    var labels = document.getElementsByTagName("LABEL"); 
    var labels_l = labels.length; 
    for(var l = 0; l < labels_l; l++){ 
     if(labels[l].hasAttribute("for") && (!labels[l].hasAttribute("onclick"))){ 
      labels[l].onclick = function() {}; 
     } 
    } 
</script> 
4

我知道這是不是真的很好標記:我只是硬編碼一個空的onclick這樣onclick=""每個標籤上。這工作了包裝標籤上:

<label for="myID" onclick=""> 
<input type="checkbox" id="myID" name="myNAME"> 
Check to check 
</label> 
+0

無論如何,它在包裝標籤上工作,處理程序是沒有必要的。 –

+2

在iPhone Safari上,這無法馬上使用。我必須設置onclick =「;」 –

2

在iOS系統7,這個問題仍然存在,沒有任何爲我工作的解決方法。

我的解決辦法是把click事件與touchend結合:

var handler = function(e) { /* do stuff */ }; 
$("ol input[type=checkbox] ~ label") 
    .on('touchend', handler) 
    .on('click', handler); 

在這個jQuery問題的一些有用的信息:http://bugs.jquery.com/ticket/5677尤其是當它說,部分在技術上有移動沒有click事件。

2

添加onclick屬性可以解決問題。

<label for="test" id="test_label" onclick=""> 
0

我只是解決了我類似的問題像這樣:

input { 
position: absolute; 
width: 120px; // size of my image 
height: 100px; // size of my image 
opacity: 0; 
display: inherit; // Because i'm hidding it on other resolutions 
} 
4
​​

要在標籤標記隨處能在iOS上水龍頭,你需要添加到其直接子(預計輸入),指針事件:無;

.name-checkbox, .some-info { 
     pointer-events: none; 
    } 
+0

我一直在尋找這一整天。謝謝! –

0

一些非常奇怪的行爲已經發生在我身上,以上都沒有解決它。如果我在標籤元素中放置了文本或圖像,則單擊該元素不起作用。但是,當我添加邊距和填充標籤,單擊邊距或填充,但不是在文本/圖像上的工作。所以我做的是讓標籤100%w 100%h絕對位於我的文字&圖片上。

<div class="wrapper"> 
    <label class="label-overlay" for="file"></label> 
    <img src="something.png"> 
    <p>Upload File</p> 
    <input type="file" name="file"> 
</div> 


<style> 
    .wrapper{display:inline-block;} 
    .label{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;} 
</style>