如果在Firefox中单击鼠标时鼠标被移动，HTML标签不会触发相应的输入

Question

在下面的示例中，当您单击标签时，输入将更改状态。

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>

[在Chrome中，当您在mousedown和mouseup事件之间移动光标时，输入仍会被触发，而在Firefox中，此复选框不会更改状态。

是否有解决此问题的方法？ （不使用JavaScript事件监听器）

Firefox版本：69.0.3 (64-bit)

Answer 1

[我将考虑在this answer中使用的相同技巧，其思想是使用伪元素增加标签的面积，以确保mouseup始终属于同一元素并触发输入更改：

label {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label:before {
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-9;
  transition:0s 0.2s z-index;
}

label:active:before {
  z-index:9;
  background:rgba(0,255,0,0.2); /* To illustrate the trick */
}

<input type="checkbox" id="1">
<label for="1">Label</label>

如您所见，单击标签时，伪元素将覆盖整个屏幕，并且您肯定会触发标签上的mouseup。