Number Input鼠标滚轮事件捕获阶段过滤失效问题排查

我无法理解为何这段代码无法拦截并阻止number input通过鼠标滚轮改变数值，想搞清楚为什么在捕获阶段拦截过滤事件不起作用。

HTML代码 #

<p id="p-number-1">
  <input id="number-1" type="number" min="0" max="100" value="50" class="number-input">
</p>
<p id="log">
</p>

JavaScript代码 #

function log(m) {
  const logp = document.getElementById("log")
  logp.innerHTML += "" + m + "<br>";
}

log("Logging started")

const pnum1 = document.getElementById("p-number-1")
const num1 = document.getElementById("number-1")

pnum1.addEventListener("wheel", function(e) { 
    log("captured outer");
    e.stopPropagation();
}, true);

num1.addEventListener("wheel", function(e) { 
    log("bubble inner");
}, false);

num1.addEventListener("wheel", function(e) { 
    log("capture inner");
}, true);

// 注：代码中重复定义了log函数和事件绑定，实际运行时会覆盖前一次定义

操作步骤：点击number input获取焦点，然后滚动鼠标滚轮。JavaScript代码已拦截滚轮事件，但数值仍会改变，尽管在外部p元素的捕获阶段调用了stopPropagation()。

需求目标 #

我想编写一个可复用组件，使用默认的number input（以及滑块）。不希望用户通过滚轮改变输入框数值，而是让滚轮触发外部未知div的滚动事件，因此需要阻止number input（和滑块）处理鼠标滚轮事件。

我有两个假设，但无法完全解释原因：

1. 最可能的假设是这是浏览器用户代理（user agent）的处理特性。我对浏览器事件处理的理解是：
   • 用户滚动鼠标滚轮
   • JavaScript处理事件：执行事件捕获/冒泡流程，事件处理器可调用preventDefault()标记事件已处理
   • JavaScript处理完成后，若未调用preventDefault()，用户代理会执行默认处理。number input的默认行为是改变数值，因此数值会变化且不会触发滚动事件。
     但这个理论是否正确？
2. 另一种可能：监听了错误的事件？或许滚轮事件被转换为其他可调用preventDefault()的事件？可以确定不是"scroll"事件，但没找到相关信息。

为什么当前方案无效？ #

你调用的e.stopPropagation()只是阻止了事件在DOM中的传递（捕获/冒泡阶段的其他监听器无法触发），但并没有阻止浏览器的默认行为。number input通过滚轮改变数值是浏览器内置的默认行为，和事件传播无关，所以stopPropagation()无法影响它。

另外，你的代码中重复定义了log函数和事件绑定，这会导致前一次的事件绑定被覆盖，但这不是核心问题。

解决方案 #

要阻止number input的滚轮默认行为，需要在滚轮事件中调用e.preventDefault()，同时可以结合条件判断，确保只在目标元素是number input时拦截，让滚轮事件继续触发外部容器的滚动：

方案一：直接在number input上阻止默认行为 #

const numInputs = document.querySelectorAll(".number-input");
numInputs.forEach(input => {
  input.addEventListener("wheel", function(e) {
    // 阻止默认行为，避免改变数值
    e.preventDefault();
    // 如果需要让外部容器滚动，可以手动触发容器的滚动
    // 示例：找到外部滚动容器，根据滚轮方向调整scrollTop
    const scrollContainer = document.querySelector(".your-scroll-container");
    if (scrollContainer) {
      scrollContainer.scrollTop += e.deltaY;
    }
  });
});

方案二：在捕获阶段统一处理（适合批量拦截） #

document.addEventListener("wheel", function(e) {
  const target = e.target;
  // 检查目标是否是number input或滑块
  if (target.type === "number" || target.type === "range") {
    e.preventDefault();
    // 触发外部容器滚动
    const scrollContainer = document.querySelector(".your-scroll-container");
    if (scrollContainer) {
      scrollContainer.scrollTop += e.deltaY;
    }
  }
}, true);

补充说明 #

• preventDefault()的作用是阻止浏览器对该事件的默认处理，这才是阻止number input数值变化的关键。
• 如果不需要手动触发外部滚动，仅阻止number input的滚轮行为，只保留e.preventDefault()即可，此时滚轮事件会继续传递，外部容器会自然滚动（因为浏览器的默认滚动行为没有被阻止，只是number input的默认行为被阻止了）。

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