在下面的示例中,当您单击标签时,输入框的状态会改变。
document.querySelector("label").addEventListener("click", function() {
console.log("clicked label");
});
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位)
在Chrome中执行的完整操作步骤:
- 在标签上按下按钮
- 在保持按下按钮的情况下移动光标(即使在标签外部)
- 将光标返回到标签
- 释放按钮
1px
也会破坏交互。 - nick zoum