標籤內的鏈接也觸發複選框，如何防止？

Question

我有這個標籤：

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

但是：

• 標籤內的鏈接打開基礎5顯示模式。

• 這工作正常，但點擊鏈接啓用 複選框。

我怎麼能防止這種情況發生？

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

鏈接點擊事件的停止傳播。這可以防止點擊事件冒泡到標籤。互動元素裏面

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

Answer 3

互動元素會導致這樣的功能的問題：它是不確定的，當你點擊一個label元素內的a元素，反之亦然會發生什麼。爲避免這種情況，請從label元素中取出a元素，例如，

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

或

<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

你應該只需要一個事件綁定到調用event.stopPropagation()和event.preventDefault()

JQuery的在標籤上的所有鏈接的鏈接：

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

純javascript（你需要在你想要的鏈接上設置一個id 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); 

這些期望的鏈接目標設置爲_self或_blank在同一窗口或新窗口中分別打開。

Answer 5

由於多個標籤可以指向相同的複選框，因此可以將文本修改爲由兩個標籤（指向複選框）和中間的錨文本組成。

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

使用上述技術，點擊鏈接不會影響複選框的狀態，但所有剩餘的文本一樣。

Answer 6

另一種直列方式：

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