如何彻底禁用text类型input元素的滚轮滚动功能？

云上老周

2026-7-28

问题

在表格的<td>中使用了text类型的input元素，示例代码如下：

<input type="text" value="20.300,00" style="max-width: 95px;">

希望禁用该元素的滚轮滚动修改值功能，当前使用的代码如下：

$(document).on("wheel", function(event) {
    if ($(document.activeElement).is("input[type='text']")) {
        $(document.activeElement).blur();
    }
});

但这段代码仍会允许滚轮滚动一次并修改值，之后才会移除输入框的焦点。尝试使用event.preventDefault();但没有效果，请问如何彻底实现禁用该功能？

解决方案

核心问题在于你之前的事件绑定时机和目标不对：滚轮事件冒泡到document时，浏览器已经执行了input的默认滚轮行为（修改值），此时再执行blur或preventDefault都无法回滚已发生的修改。正确的做法是直接在input元素层面拦截滚轮事件，阻止默认行为的触发。

1. 针对静态生成的input元素

直接为所有text类型的input绑定wheel事件，在事件处理中阻止默认行为和事件冒泡：

$("input[type='text']").on("wheel", function(event) {
    // 阻止浏览器执行滚轮修改值的默认行为
    event.preventDefault();
    // 阻止事件继续向上冒泡（可选，根据业务需求决定）
    event.stopPropagation();
});

2. 针对动态生成的input元素

如果input是通过JS动态添加到表格中的，使用事件委托绑定到表格（而非document），确保动态新增的元素也能触发事件：

// 假设表格的id为"target-table"，可根据实际DOM结构修改选择器
$("#target-table").on("wheel", "input[type='text']", function(event) {
    event.preventDefault();
    event.stopPropagation();
});