在Chrome和Edge浏览器中，点击箭头时，input[type=number]持续增加

Question

我遇到以下问题：在特定的jQuery库加载后，如果点击数字输入箭头，则输入值会不断增加（或减少），直到焦点移出输入元素。

将事件绑定到该元素上显示它会不断触发，这使我认为某些代码片段在循环设置。但实际并不是这样。

我已经追踪到问题是因为在事件上使用造成的。

请参阅：

document.body.addEventListener('mouseup', (e) => {
    e.preventDefault();
});

<input type="number">

为什么会发生这种情况？

- Ante Novokmet

---

请在问题本身中包含所有相关代码，而不仅仅是在像jsfiddle这样的外部网站上。 - Heretic Monkey

Answer 1

我搜索导致这些无限增长的输入的原因时遇到了困难。

只有在我自己找到原因之后，我才发现了一个类似的错误，即阻止 mousemove 的默认操作 (https://dev59.com/VpLea4cB1Zd3GeqPxRDp#37521764)。不过，这个错误似乎已经不再出现了。

看起来这是 Chrome (和 Edge) 的 bug。但是，正如https://dev59.com/_r7pa4cB1Zd3GeqP1ZCT#65253876所说，它实际上是一种合理的默认行为。我自己没能在任何地方找到这个标准行为的文档记录。解决问题的一种方法是停止事件向上冒泡到文档中，

document.querySelector('input').addEventListener('mouseup', (e) => {
    e.stopPropagation();
});

另一个是不防止默认行为。

- Ante Novokmet

---

感谢您发布了解决此问题的方案。您可以将您的答案标记为已接受的答案。这有助于其他社区成员在未来遇到类似问题时解决。感谢您的理解。 - Yu Zhou

Answer 2

以下问题与jQuery无关。问题是代码正好做了你想要的事情。 在代码中，<input type="number" />有两个事件。一个是'mousedown'，另一个是'mouseup'。

考虑以下示例：https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_preventdefault2 上面的示例表示相同的情况。

你所做的是，如果你做mousedown和cancel mouseup，那么数字将会：

1. 如果你按向上箭头，数字会继续增加 2. 如果你按向下箭头，数字会继续减少

唯一的惊喜是，如果您将事件添加到input而不是body，这将完美地解释，但无论如何，似乎默认情况下浏览器会根据事件冒泡到body来增加或减少数字。 注意: 下面复制了问题，没有添加任何jQuery！

document.body.addEventListener('mouseup', (e) => {
  e.preventDefault();
});

<input type="number">

- Deadpool

---

我同意，input[type=number]的默认浏览器行为如此，现在更有意义了。禁用mouseup会使它继续增加（并防止你在释放鼠标时停止），而禁用mousedown将禁用增加...只是希望有更好的方法来了解元素的默认行为。谢谢。 - Ante Novokmet