如果在mousedown

Question

我刚刚意识到有关标签标签标准行为的错误（或可能是功能）。

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

  

这是标准鼠标行为，如果mousedown移动光标时不切换输入字段？以及如何避免它？

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>