Khai thác trên <label> trong Mobile Safari

Khai thác trên <label> không tự động lấy nét liên kết trong Mobile Safari nhưng Nếu một chức năng rỗng như clickhandler được định nghĩa như thế này Khai thác trên <label> trong Mobile Safari

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

giải quyết vấn đề.

Đây là mã nguồn đầy đủ.

<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>

Bạn có biết tại sao nó hoạt động không?

Nguồn

2011-09-09 Viktor

Bạn có thể đăng html của mình không? Có phải là ' Nhấn vào đây' – mplungjan

Cảm ơn câu hỏi. Đã được tìm kiếm một workaround rằng lỗi. Onclick này đã lưu tôi :) Nếu bạn đã gửi một lỗi trong https://bugreport.apple.com/, hãy cho chúng tôi biết những gì họ đã trả lời bạn. – RaphaelDDL

[đặt thuộc tính con trỏ của phần tử nhãn thành con trỏ] (http://stackoverflow.com/a/5560077) #wtf –

Dường như bạn đã tìm thấy lỗi trong Safari của iOS. Xin chúc mừng! Tìm và báo cáo lỗi là gây nghiện.

Bạn có thể báo cáo lỗi này và các lỗi khác cho Apple theo số https://bugreport.apple.com/. Apple có thể không theo dõi ngay lập tức, nhưng tại một thời điểm nào đó trong tương lai họ sẽ thông báo cho bạn rằng đó là bản sao của một lỗi hiện có, rằng họ không coi đó là lỗi hoặc (nếu bạn may mắn) mà bạn nên kiểm tra nó một lần nữa trong một phiên bản mới của iOS.

Đồng thời, giữ nguyên giải pháp này - bạn sẽ cần đến nó.

Nguồn

2011-09-12 05:12:54 s4y

Yay! Tôi yêu Safari :) –

Thật sao? Bạn không được là nhà phát triển web;) – DarkNeuron

Chúng tôi có thể khắc phục sự cố này tại Etsy bằng cách thêm dòng mã đơn này vào tệp javascript chung của chúng tôi.

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

Chúng tôi đang sử dụng thư viện xu js và dòng đó chỉ cần đính kèm trình xử lý nhấp chuột trống cho tất cả các yếu tố label. Đối với một số lý do, điều này kỳ diệu khắc phục vấn đề trên safari di động.

Nguồn

2012-01-05 19:54:34

Trên iOS 7 Tôi vẫn gặp sự cố tương tự. Không thể nhận được 'click' để kích hoạt các thẻ' label'. Kỳ lạ và rất bực bội. – Dex

Nếu đã có thuộc tính onclick, người ta không nên ghi đè lên nó và trong thử nghiệm của tôi, nó hoạt động (thuộc tính onclick) và nhấp vào hộp kiểm. vì vậy giải pháp của tôi là:

<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>

Nguồn

2012-03-31 09:30:43

tôi biết nó không thực sự tốt đẹp đánh dấu: Tôi chỉ hardcoded một onclick trống như thế này onclick="" trên mỗi nhãn. Làm việc trên nhãn bao bì:

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

Nguồn

2012-08-09 12:47:09

Trên nhãn gói, nó vẫn hoạt động, trình xử lý là không cần thiết. –

Trên iPhone Safari, tính năng này không hoạt động ngay lập tức. Tôi đã phải đặt onclick = ";" –

Trong iOS 7, vấn đề này vẫn tồn tại mà không có bất kỳ cách giải quyết nào phù hợp với tôi.

Giải pháp của tôi là để kết hợp các sự kiện click với touchend:

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

Một số thông tin hữu ích trong vấn đề này JQuery: http://bugs.jquery.com/ticket/5677 Đặc biệt là phần mà nó nói về mặt kỹ thuật không có click sự kiện trên điện thoại di động.

Nguồn

2014-04-15 01:09:50 Dex

thêm thuộc tính onclick sẽ khắc phục được sự cố.

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

Nguồn

2015-01-19 01:09:42

dân sử dụng FastClick:

Sử dụng CSS này:

label > * { 
    display: block; 
    pointer-events: none; 
}

thấy vấn đề này: https://github.com/ftlabs/fastclick/issues/60

và codepen này: http://codepen.io/visnup/pen/XJNvEq

Nguồn

2015-05-11 14:45:10 maikel

GENIOUS !!!!!!!! – Tukkan

Không nghĩ về điều này, bên thứ ba đã phát triển ứng dụng lai này. đã sử dụng fastclick –

Tôi chỉ giải quyết vấn đề tương tự của tôi như thế này:

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 
}

Nguồn

2015-12-23 10:03:52

<label for="myID" onclick=""> 
    <input type="checkbox" id="myID" name="myNAME"> 
    <span class="name-checkbox"> My name for my checkbox </span> 
    <span class="some-info">extra informations below</span> 
</label>

Để kích hoạt vòi nước trên iOS ở khắp mọi nơi trên thẻ nhãn, bạn cần phải thêm cho trẻ em trực tiếp của nó (mong đợi đầu vào), con trỏ-sự kiện: none;

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

Nguồn

2016-05-19 16:16:24

Tôi đã tìm kiếm điều này cả ngày. Cảm ơn! –

Một số hành vi thực sự kỳ lạ đã xảy ra đối với tôi, nơi không có điều nào ở trên khắc phục được. Nếu tôi đã đặt văn bản hoặc hình ảnh bên trong phần tử nhãn, việc nhấp vào phần tử đó không hoạt động. Tuy nhiên khi tôi thêm lề và đệm vào nhãn, hãy nhấp vào lề hoặc đệm nhưng không phải trên văn bản/hình ảnh đã hoạt động. Vì vậy, những gì tôi đã làm là làm cho nhãn 100% w 100% h hoàn toàn được định vị trên hình ảnh văn bản & của tôi.

<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>

Nguồn

2017-02-05 03:51:56

Khai thác trên <label> trong Mobile Safari

Trả lời

Các vấn đề liên quan