No exemplo a seguir, quando você clica no rótulo, a entrada muda de estado.
document.querySelector("label").addEventListener("click", function() {
console.log("clicked label");
});
label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<input type="checkbox" id="1">
<label for="1">Label</label>
No Chrome, quando você move o cursor entre os eventos mousedown
e mouseup
, a entrada ainda é acionada, enquanto no Firefox a caixa de seleção não muda de estado.
Existe uma maneira de corrigir isso? (sem usar ouvintes de evento JavaScript)
Versão do Firefox: 69.0.3 (64-bit)
Conjunto completo de ações ao usar o chrome.
- Pressione o botão sobre a etiqueta
- Mova o cursor (mesmo fora do rótulo) enquanto mantém pressionado o botão
- Retorne o cursor de volta ao rótulo
- Solte o botão
1px
interromperá a interação.