如果我们在鼠标下移时设置preventDefault，然后双击文档，那么它就会阻止复选框/单选标签的默认行为

If we preventDefault on mousedown, and double click on the document, then it is preventing default behaviour of chexkbox/radio label

本文关键字：复选框 单选 默认 标签 鼠标 我们 设置 文档 如果 双击 然后      更新时间：2023-09-26

此问题仅存在于google chrome浏览器中。如果我在一个有焦点样式的容器中有一个带标签的复选框。当我单击标签时，我阻止使用e.p preventdefault()将焦点移动到容器，但这又引入了一个问题。如果双击文档上的任何地方或通过鼠标拖动选择任何文本，则单击标签不会选中复选框。但是直接点击复选框也可以。

如果我使用window.getSelection().removeAllRanges()清除文本，它会工作，但不允许用户再选择标签的文本。

这是chrome浏览器的bug吗?我没有看到任何在铬的bug论坛。请检查下面的代码。

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/

一个更好的解决方案似乎是:

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

这只会阻止它被聚焦。

相关文章：