为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

呼啦一阵风 2023-11-12 15:02:00
我遇到以下问题:加载特定 jQuery 库后,如果单击数字输入箭头,输入值会不断增加(或减少),直到焦点移到输入元素之外。将事件绑定input到元素显示它不断触发,这让我相信某些代码一直element.value在循环中设置。但那并没有发生。我已将问题归结为调用event.preventDefault()一个mouseup活动。看:document.body.addEventListener('mouseup', (e) => {    e.preventDefault();});<input type="number">为什么会出现这种情况?
查看完整描述

2 回答

?
子衿沉夜

TA贡献1828条经验 获得超3个赞

我很难通过搜索导致这些无限增加的输入的原因来查找信息。

只有在自己找到原因之后,我才发现了一个类似的错误,该错误是在阻止默认值时发生的mousemove。虽然,这样的事情似乎不会再发生了。

看起来这是一个 Chrome(和 Edge)错误。实际上是默认行为,这在他所说的方式中是有意义的。我本人未能在任何地方找到这种标准行为的记录。解决该问题的一种方法是停止将事件冒泡到文档,

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

另一个是,没有阻止默认行为。


查看完整回答
反对 回复 2023-11-12
?
白衣染霜花

TA贡献1796条经验 获得超10个赞

以下问题与jQuery无关。问题是代码正在做你想要它做的事情。代码中<input type="number" />有2个事件。第一个是“mousedown”,第二个是“mouseup”。


你正在做的是cancelling the 2nd part, ie mouseup,如果你按下mousedown鼠标cancel,那么数字将:

  1. 如果你按向上箭头继续增加

  2. 如果你按下箭头继续减少

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



查看完整回答
反对 回复 2023-11-12
  • 2 回答
  • 0 关注
  • 90 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信