单击 Chrome 和 Edge 中的箭头时，输入[type=number] 不断增加

Question

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

将事件绑定input到元素显示它不断触发，这让我相信某些代码一直element.value在循环中设置。但那并没有发生。

我已将问题归结为调用event.preventDefault()一个mouseup活动。

看：

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

    e.preventDefault();

});

<input type="number">

为什么会出现这种情况？

Answer 1

我很难通过搜索导致这些无限增加的输入的原因来查找信息。只有在自己找到原因之后，我才发现了一个类似的错误，该错误是在阻止默认值时发生的mousemove。虽然，这样的事情似乎不会再发生了。看起来这是一个 Chrome（和 Edge）错误。实际上是默认行为，这在他所说的方式中是有意义的。我本人未能在任何地方找到这种标准行为的记录。解决该问题的一种方法是停止将事件冒泡到文档，document.querySelector('input').addEventListener('mouseup', (e) => {     e.stopPropagation(); });另一个是，没有阻止默认行为。

Answer 2

以下问题与jQuery无关。问题是代码正在做你想要它做的事情。代码中<input type="number" />有2个事件。第一个是“mousedown”，第二个是“mouseup”。你正在做的是cancelling the 2nd part, ie mouseup，如果你按下mousedown鼠标cancel，那么数字将：如果你按向上箭头继续增加如果你按下箭头继续减少唯一令人惊讶的是，如果您编写添加事件的代码而不是添加事件input，那么这将具有完美的意义body，但无论如何似乎browser by default is increasing or decreasing number -- based on event-bubbling to body。注意：下面复制了这个问题，但没有添加 jQuery！document.body.addEventListener('mouseup', (e) => {   e.preventDefault(); });<input type="number">