禁用input[type="number"]滚轮需同时拦截wheel（webkit/blink）、dommousescroll（firefox）和keydown（方向键），且wheel/dommousescroll监听必须设passive: false，css隐藏箭头仅为辅助。
input[type="number"] 的鼠标滚轮修改行为默认开启，仅靠 CSS 隐藏箭头完全无效——必须用 JavaScript 拦截 wheel 或 DOMMouseScroll 事件，并注意浏览器差异和 passive 选项。
Chrome/Safari/Edge 等 WebKit/Blink 内核：监听 wheel 并 e.preventDefault()
这些浏览器触发的是 wheel 事件（不是 mousewheel，后者已废弃）。直接写 onwheel="return false" 可能失效，推荐用原生 addEventListener：
- 必须传
{ passive: false }，否则现代 Chrome/Safari 中preventDefault()会被忽略 - 只在元素获得焦点时绑定更安全（避免影响页面滚动），失焦时移除
- 不要用 jQuery 的
.on('wheel')包装器——它可能自动设为passive: true，导致拦截失败
示例：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const input = document.querySelector('input[type="number"]');
input.addEventListener('focus', () => {
input.addEventListener('wheel', e => e.preventDefault(), { passive: false });
});
input.addEventListener('blur', () => {
input.removeEventListener('wheel', e => e.preventDefault(), { passive: false });
});
Firefox：必须监听 DOMMouseScroll，且 passive: false 不可省
Firefox 不支持 wheel 事件拦截数字输入框的滚轮行为，它用的是已废弃但仍在生效的 DOMMouseScroll。这个事件在现代 Firefox 中同样要求 { passive: false } 才能让 preventDefault() 生效：
-
onmousewheel="return false"对 Firefox 完全无效 -
$(el).on('DOMMouseScroll')在 jQuery 中不可靠，应操作原生节点 - 若同时支持多浏览器，需对同一元素分别监听
wheel和DOMMouseScroll
示例：
input.addEventListener('DOMMouseScroll', e => e.preventDefault(), { passive: false });
Vue + Element UI 场景：@mousewheel.native.prevent 是最简解法
在 <el-input type="number"></el-input> 中，Vue 的 .native 修饰符可捕获原生事件，.prevent 自动调用 preventDefault()：
- 该写法内部已处理
passive兼容性，无需手动配置 - 仅适用于 Vue 项目，不解决纯 HTML 场景
- 如还需隐藏箭头，仍要配合 CSS：
input::-webkit-outer-spin-button、input::-webkit-inner-spin-button设为none，并加-moz-appearance: textfield
写法：
<el-input type="number"></el-input>
别忘了键盘方向键（↑/↓）也要单独拦截
滚轮禁用后，用户仍可用方向键增减数值。它们触发的是 keydown 事件，不是 wheel：
- 用
e.key === 'ArrowUp'或'ArrowDown'判断，不要用废弃的e.keyCode - 必须在
keydown阶段拦截，否则值已变更；input事件太晚 - 如果同时做实时校验（比如限制范围），方向键拦截逻辑要早于数值修正逻辑
示例：
input.addEventListener('keydown', e => {
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') e.preventDefault();
});
真正起效的关键不是“写了什么代码”，而是是否覆盖了所有触发路径：WebKit 的 wheel、Firefox 的 DOMMouseScroll、键盘的 keydown，三者缺一不可；CSS 隐藏箭头只是表层，行为拦截才是核心。很多人卡在 passive: false 没传，或者只拦了滚轮却忘了方向键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
