input[type=number] 在点击 Chrome 和 Edge 中的箭头时不断增加

Question

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

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

我已将问题追踪到在 mouseup 事件中调用 event.preventDefault()。

参见：

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'.

考虑以下示例：https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_preventdefault2

上面的例子也是如此。

你正在做的是 cancelling the 2nd part, ie mouseup 所以如果你做 mousedown 和 cancel mouseup，那么数字将是：

向上按箭头继续增加
向下按箭头继续减少

唯一令人惊讶的是，如果您将添加事件的代码编写到 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">

input[type=number] 在点击 Chrome 和 Edge 中的箭头时不断增加

input[type=number] continuously increasing when clicking on arrows in Chrome and Edge

html

javascript

google-chrome

microsoft-edge