为何input元素的.on("click")触发正常，.on("scroll")却无响应？

1. scroll事件不触发的原因 #

<input type="number">元素的滚轮操作不会触发scroll事件——scroll事件仅针对带有滚动条的容器（如<div>、<textarea>），而数字输入框的滚轮是直接修改输入值，对应的正确事件是input（值实时变化时触发）或change（输入框失去焦点且值改变时触发）。

2. 为什么需要onmousewheel=""？ #

这是部分浏览器的兼容性 quirks，空的onmousewheel属性相当于强制启用了输入框的滚轮调节行为，但这不是规范做法。更可靠的方式是通过JS监听wheel事件手动控制值，或者确保输入框获得焦点后使用滚轮（多数现代浏览器默认支持焦点下的数字输入框滚轮调节）。

修正后的代码示例 #

JavaScript #

$(document).ready(function() {
    const slideInput = $("#slider-value");

    slideInput.on("click", function() {
        console.log(slideInput.val());
    });
    
    // 监听值实时变化，用于同步进度条
    slideInput.on("input", function() {
        const currentValue = $(this).val();
        console.log(currentValue);
        // 在这里添加进度条移动逻辑，例如：
        // const range = 10 - 2;
        // const percentage = ((currentValue - 2) / range) * 100;
        // $(".your-progress-bar").css("width", `${percentage}%`);
    });

    // 可选：手动监听滚轮事件，无需焦点即可控制值
    slideInput.on("wheel", function(e) {
        e.preventDefault();
        let currentVal = parseFloat($(this).val()) || 2;
        const step = parseFloat($(this).attr("step")) || 0.1;
        // 滚轮向下（deltaY正）减小值，向上增大值，可按需调整
        currentVal += e.originalEvent.deltaY > 0 ? -step : step;
        // 限制值在min和max范围内
        const min = parseFloat($(this).attr("min")) || 2;
        const max = parseFloat($(this).attr("max")) || 10;
        currentVal = Math.max(min, Math.min(max, currentVal));
        // 保留一位小数，匹配step精度
        $(this).val(currentVal.toFixed(1));
        // 手动触发input事件，同步进度条
        $(this).trigger("input");
    });
});

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="slider-value" step=".1" min="2" max="10" placeholder="2.0" class="slider-value">

关键说明 #

• 使用input事件替代scroll，能实时捕获输入框值的变化，完美适配进度条同步需求。
• 移除onmousewheel=""属性，通过wheel事件手动控制值，不仅解决兼容性问题，还能自定义滚轮逻辑（比如调整增减方向、控制精度）。
• 手动处理滚轮时记得限制值在min和max范围内，避免输入非法值。

内容的提问来源于stack exchange，提问作者Infamoose