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

【问题标题】：Label is not toggled, if cursor is moved while mousedown如果在鼠标按下时移动光标，则不会切换标签
【发布时间】：2016-06-08 20:07:35
【问题描述】：

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

click 事件通常在鼠标再次抬起后触发。只要鼠标按下时光标不移动，就会触发点击事件并切换带标签的输入字段（例如复选框）。

这是标准的鼠标行为，在鼠标按下时在移动光标时不切换输入字段？以及如何避免？

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>

【问题讨论】：

我认为这是标准行为。锚点和按钮也是如此。如果用户期望通常的行为，你可能不想搞砸它。

标签： html css forms mouseevent

【解决方案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>

【讨论】：