如果鼠标按下时移动光标，则标签不会切换

Question

我刚刚发现了一个关于 label 标记的标准行为的错误（或者可能是功能）。

点击事件一般在鼠标再次松开后触发。只要鼠标按下时光标没有移动，就会触发点击事件并切换标记的输入字段（例如复选框）。

Is this the standard mouse behavior to NOT toggle the input field while moving cursor if mousedown? And how to avoid it?

label {
  display: block;
  cursor: pointer;
  padding: 1rem;
  color: firebrick;
  border: 1px solid currentcolor;
  font-family: sans-serif;
  text-align: center;
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"]:checked + label {
  color: limegreen;
}

<input type="checkbox" id="test" />
<label for="test">Click here and move your cursor while mousedown</label>

Answer 1

据我所知所有浏览器处理click 和mousedown 之间的区别类似。按下鼠标按钮时触发 mousedown。只有在鼠标再次抬起且同时光标未移动后才会触发单击。这不仅适用于标签，也适用于链接和按钮，并且是标准行为。

如果您不想让文字被选中，您可以尝试使用user-select: none。

label {
  display: block;
  cursor: pointer;
  padding: 1rem;
  color: firebrick;
  border: 1px solid currentcolor;
  font-family: sans-serif;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}
input[type="checkbox"] {
  display: none;
}
input[type="checkbox"]:checked + label {
  color: limegreen;
}

<input type="checkbox" id="test" />
<label for="test">Click here and move your cursor while mousedown</label>

如果鼠标按下时移动光标，则标签不会切换

Label is not toggled, if cursor is moved while mousedown

html

css

forms

mouseevent