如何在KonvaJS Stage中仅捕获一次"wheel"滚轮事件？

KonvaJS 提供了两种符合惯用写法的实现方式，直接利用其事件系统特性即可完成需求：

1. 使用内置的once方法（推荐） #

这是最简洁且符合库设计习惯的方式，once方法会自动在事件触发一次后解绑监听器，无需手动处理：

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

// 绑定wheel事件，仅执行一次
stage.once('wheel', (event) => {
  // 这里编写你需要执行的逻辑
  console.log('wheel事件已触发，仅执行一次', event);
});

Konva的事件系统基于标准EventEmitter模式，once是其原生支持的API，和Node.js、浏览器原生事件的once行为一致，属于官方推荐的惯用写法。

2. 手动绑定+执行后解绑 #

如果需要更灵活的控制（比如根据特定条件决定是否解绑），可以手动绑定事件监听器，在函数执行完成后立即调用off方法解绑：

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

function handleWheel(event) {
  // 执行目标逻辑
  console.log('wheel事件已触发，仅执行一次', event);
  // 执行后立即解绑该监听器
  stage.off('wheel', handleWheel);
}

// 绑定wheel事件
stage.on('wheel', handleWheel);

这种方式适合需要自定义解绑时机的场景，但如果只是单纯需要执行一次，第一种方法更高效简洁。

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