如何阻止页面滚轮滚动，仅让Three.js Canvas响应滚轮事件？

云上老周

2026-8-13

解决Canvas滚轮事件无法阻止页面滚动的问题

以下是几个关键修复方向和具体实现：

1. 切换到事件捕获模式

浏览器的页面滚动逻辑可能在冒泡阶段之前的捕获阶段就已触发，导致你的冒泡阶段监听来不及阻止默认行为。修改事件监听的第三个参数为true，在捕获阶段处理事件：

canvas.addEventListener('wheel', onMouseWheel, true);

2. 禁用被动事件监听

现代浏览器默认将wheel事件设为被动监听（passive: true），此时调用event.preventDefault()会被浏览器忽略。需要显式设置passive: false：

canvas.addEventListener('wheel', onMouseWheel, { 
  passive: false,
  capture: true // 结合捕获模式，拦截优先级更高
});

3. 确保绑定到正确的Canvas元素

如果你的Canvas是由Three.js渲染器创建的，要确保绑定事件的是renderer.domElement，而非其他同名元素：

const renderer = new THREE.WebGLRenderer();
const canvas = renderer.domElement;
// 绑定事件
canvas.addEventListener('wheel', onMouseWheel, { passive: false, capture: true });

4. 兼容旧事件类型（可选）

部分旧版本浏览器（如IE、旧Edge）使用mousewheel而非标准wheel事件，可以同时绑定覆盖场景：

function handleWheel(event) {
  event.preventDefault();
  event.stopPropagation();
  // 这里添加你的Three.js滚轮交互逻辑，比如相机缩放
}

canvas.addEventListener('wheel', handleWheel, { passive: false, capture: true });
canvas.addEventListener('mousewheel', handleWheel, { passive: false, capture: true });