如果我們在mousedown上防止默認，並雙擊文檔，那麼它會阻止chexkbox/radio標籤的默認行爲

Question

此問題僅在谷歌瀏覽器中存在。如果我在具有某些焦點樣式的容器內有一個帶有標籤的複選框，當我點擊標籤時，我正在阻止使用e.preventDefault（）將焦點移動到容器上，但是這引發了另外一個問題。如果我們雙擊文檔上的任意位置，或者通過鼠標拖動來選擇任何文本，然後單擊標籤不會選中複選框。但直接點擊複選框可以正常工作。

如果我使用window.getSelection().removeAllRanges()清除文本，它正在工作，但不允許用戶選擇標籤的文本。

這是一個鉻瀏覽器的錯誤。我沒有看到任何鉻錯誤論壇。 請檢查下面的代碼..

document.getElementById('chkLabel1').onmousedown = function(e) { 
 
    e.preventDefault(); 
 
};

.container { 
 
    height: 300px; 
 
    width: 300px; 
 
    border: 3px solid black; 
 
    padding: 20px; 
 
    } 
 
    .container:focus { 
 
    border-color: red; 
 
    } 
 
    #chkLabel1:focus { 
 
    border: 1px solid red; 
 
    }

<div class="container" tabindex="0"> 
 
    <input type="checkbox" id="chk1" /> 
 
    <label id='chkLabel1' for="chk1"> with preventDefault </label> 
 
<br/> 
 
    <input type="checkbox" id="chk2" /> 
 
    <label for="chk2"> without preventDefault </label> 
 
    </div>

這裏是小提琴鏈接

https://jsfiddle.net/zgz2j8ad/

Answer 1

更好的解決方案似乎是這樣的：

document.getElementById('chkLabel1').onfocus = function(e) { 
    e.preventDefault(); 
}; 

這隻會阻止它聚焦。