Một liên kết bên trong nhãn, cũng kích hoạt hộp kiểm, cách ngăn chặn?

Question

Tôi có nhãn này:

<label><input type="checkbox"> I aggree to the <a href="terms">terms</a> and would like to continue</label> 

Tuy nhiên:

• Liên kết bên trong nhãn mở ra một nền tảng 5 tiết lộ phương thức.

• Điều này hoạt động tốt nhưng nhấp vào liên kết cũng cho phép hộp kiểm .

Làm cách nào để tôi có thể ngăn chặn xảy ra?

thx,

Answer 1

Try this.. 
<label> 
     <input type="checkbox" /> I aggree to the <a href="terms">terms</a> and would like to continue 
</label> 

Answer 2

Dừng công tác tuyên truyền về sự kiện nhấp chuột vào liên kết. Điều này ngăn chặn sự kiện nhấp từ sủi bọt lên đến nhãn.

https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation

Answer 3

yếu tố tương tác bên trong yếu tố tương tác gây ra vấn đề chức năng như thế này: nó là undefined gì xảy ra khi bạn nhấp vào một yếu tố a bên trong một yếu tố label hoặc ngược lại. Để tránh điều này, hãy lấy phần tử a ra khỏi phần tử label, ví dụ:

<label><input type="checkbox">I agree</label> to the <a href="terms">terms</a> 
and would like to continue 

hoặc

<input type="checkbox" id="agree"><label for="agree">I agree</label> to the 
<a href="terms">terms</a> and would like to continue 

Answer 4

Bạn chỉ nên cần phải ràng buộc một sự kiện để liên kết mà các cuộc gọi event.stopPropagation() và event.preventDefault()

JQuery cho tất cả các liên kết trong nhãn:

$(document).on("tap click", 'label a', function(event, data){ 
    event.stopPropagation(); 
    event.preventDefault(); 
    window.open($(this).attr('href'), $(this).attr('target')); 
    return false; 
}); 

tinh khiết javascript (bạn cần đặt id trên liên kết bạn muốn theo dõi ow)

var termLink = document.getElementById('termLink'); 
var termClickHandler = function(event) { 
    event.stopPropagation();  
    event.preventDefault(); 
    window.open(termLink.href, termLink.target); 
    return false; 
}; 
termLink.addEventListener('click', termClickHandler); 
termLink.addEventListener('touchstart', termClickHandler); 

Những mong đợi mục tiêu liên kết được thiết lập để _self hoặc _blank để mở trong cùng một cửa sổ hoặc một cửa sổ mới tương ứng.

Answer 5

Vì nhiều nhãn có thể trỏ đến cùng một hộp kiểm, bạn có thể sửa đổi văn bản để bao gồm hai nhãn (chỉ vào hộp kiểm) và văn bản liên kết ở giữa.

<input id="cb" type="checkbox"> 
 
<label for="cb">I agree to the</label> 
 
<a href="#">terms</a> 
 
<label for="cb">and would like to continue</label>

Sử dụng kỹ thuật nói trên, nhấp vào liên kết không ảnh hưởng đến trạng thái của hộp kiểm, tuy nhiên tất cả các văn bản còn lại không.

Answer 6

Một cách inline:

<label> 
    <input type="checkbox"> 
    I aggree to the 
    <span onclick="event.stopPropagation();"> 
      <a href="terms">terms</a> 
    </span> 
    and would like to continue 
</label>