Если мы предотвратим дефолт при наведении мыши и дважды щелкнем по документу, то это предотвратит поведение по умолчанию флажка/радио-метки.

Эта проблема существует только в 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>

Вот ссылка на скрипку

https://jsfiddle.net/zgz2j8ad/


person tinku    schedule 22.08.2016    source источник
comment
всегда размещайте соответствующий код в самом вопросе   -  person Bhojendra Rauniyar    schedule 22.08.2016


Ответы (1)


Казалось бы, лучшим решением будет следующее:

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

Это только остановит его фокусировку.

person Jed Fox    schedule 24.08.2016