因为firefox不支持onmousewheel内联属性，仅识别dommousescroll事件；正确做法是双路监听或统一使用标准wheel事件，并配合preventdefault()阻止默认行为。
为什么 onmousewheel="return false" 在 Firefox 里不生效
因为 Firefox 不支持 onmousewheel 这个内联事件属性，它用的是标准 DOM 事件 DOMMouseScroll。只写 onmousewheel 只能拦住 Chrome、Edge、Safari 等 WebKit/Blink 内核浏览器，Firefox 会完全忽略——结果就是“在 Chrome 好使，一测 Firefox 就失效”。
正确做法是双路监听：
- 给所有
input[type="number"]绑定onmousewheel（兼容 WebKit/Blink） - 同时用
addEventListener('DOMMouseScroll', ...)拦 Firefox（注意不是onDOMMouseScroll属性，那是过时的 jQuery 风格写法） - 现代推荐统一用
addEventListener('wheel', ...)，它已成标准，Chrome/Firefox/Edge 全支持，且语义更准确（wheel是当前规范事件名）
input::-webkit-inner-spin-button 只隐藏按钮，不阻止行为
CSS 的 -webkit-appearance: none 或 textfill 只影响渲染层，对输入逻辑零干预。即使箭头看不见了，用户仍可用键盘方向键（↑/↓）、滚轮、甚至快捷键（如 Ctrl+↑）触发增减——这常被误认为“已禁用”，实则只是 UI 隐藏。
必须配合 JS 行为拦截才真正有效：
- 监听
keydown事件，对ArrowUp/ArrowDown调用event.preventDefault() - 监听
wheel事件，同样preventDefault（注意：不要用scroll，那是页面滚动事件） - 避免只监听
focus后再绑定——应全局绑定，否则动态插入的 input 会漏掉
Vue/React 中怎么写才不重复、不漏绑
框架里硬写 @mousewheel.prevent 看似简单，但容易出问题：
- Vue 的
@mousewheel.native.prevent只作用于原生input，若你用的是封装组件（如el-input或Antd Input），需确认它是否透传wheel事件；否则得用ref手动绑定 - React 中不能直接写
onMousewheel（React 事件系统不映射该事件），得用useEffect+ref在挂载后调用addEventListener('wheel', ...) - 别在每次 render 里重新绑定/解绑——会导致频繁 add/remove，应只在 mount/unmount 时操作
示例（Vue 3 setup）：
const inputRef = ref()
onMounted(() => {
const el = inputRef.value
if (el) {
el.addEventListener('wheel', e => e.preventDefault())
el.addEventListener('keydown', e => {
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') e.preventDefault()
})
}
})
onUnmounted(() => {
const el = inputRef.value
if (el) {
el.removeEventListener('wheel', () => {})
el.removeEventListener('keydown', () => {})
}
})
移动端和 Safari 的隐藏陷阱
iOS Safari 和部分安卓 WebView 对 type="number" 的处理很特殊：即使你 CSS 隐藏了 spin button、JS 拦截了 wheel，它仍可能在获得焦点时弹出数字键盘，并允许通过键盘上的「+/-」或「上下箭头」物理键修改值——这些行为不在标准 wheel 或 keydown 范围内。
这时唯一可靠方案是：
- 放弃
type="number"，改用type="text" inputmode="decimal"（iOS 支持良好，唤起数字键盘但无增减逻辑） - 用 JS 强制校验输入内容：
input事件中用parseFloat(value)提取数字，非法值则setRangeText('', 0, value.length, 'end')清空 - 别依赖
valueAsNumber——Safari 对它的解析比 Chrome 更严格，空字符串、带空格、科学计数法都会返回NaN
真正难搞的从来不是“怎么禁用”，而是“怎么在禁用之后，还让输入体验不崩”。很多团队最后发现：与其花半天修 number 的各种边角行为，不如换 type + inputmode + JS 校验，反而更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
