Эта проблема существует только в Google Chrome. Если у меня есть флажок с меткой внутри контейнера, у которого есть стили фокуса. Когда я нажимаю на метку, я предотвращаю перемещение фокуса на контейнер с помощью 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>
Вот ссылка на скрипку