Orillusion引擎中鼠标右键点击事件失效问题解析

问题背景

在Web3D开发中，用户交互是至关重要的功能之一。Orillusion作为一款优秀的WebGPU引擎，提供了完整的3D交互事件系统。然而，在0.7.2版本中存在一个关于鼠标右键点击事件无法正常触发的缺陷。

问题现象

开发者在为3D对象添加PointerEvent3D.POINTER_CLICK和PointerEvent3D.POINTER_RIGHT_CLICK事件监听时发现：

• 左键点击事件可以正常触发回调
• 右键点击事件完全无响应

技术分析

事件监听机制

Orillusion引擎通过InputSystem类处理用户输入事件。对于鼠标点击事件，系统监听了canvas元素的"click"事件：

canvas.addEventListener("click", (e: MouseEvent) => {
    if (e.button == 2) { // 右键
        this.rightClick(e);
    } else if (e.button == 0) { // 左键
        this.mouseClick(e);
    }
}, true);

问题根源

经过深入分析，发现问题的根本原因在于：

1. 浏览器中"click"事件默认只响应主按钮（通常是左键）的点击
2. 右键点击通常会触发"contextmenu"事件而非"click"事件
3. 因此代码中的右键判断分支(e.button == 2)永远不会被执行

浏览器行为差异

不同浏览器对鼠标事件的处理存在细微差异：

• 所有现代浏览器中，"click"事件仅响应主按钮
• 右键点击会优先触发"contextmenu"事件（用于显示上下文菜单）
• 需要特别监听"contextmenu"事件或使用"mousedown"/"mouseup"事件来捕获右键点击

解决方案

推荐修复方案

1. 修改事件监听策略，同时监听"click"和"contextmenu"事件：

// 处理左键点击
canvas.addEventListener("click", (e: MouseEvent) => {
    if (e.button == 0) {
        this.mouseClick(e);
    }
}, true);

// 处理右键点击
canvas.addEventListener("contextmenu", (e: MouseEvent) => {
    e.preventDefault(); // 阻止默认右键菜单
    this.rightClick(e);
}, true);

2. 或者统一使用"mousedown"事件处理所有按钮点击：

canvas.addEventListener("mousedown", (e: MouseEvent) => {
    if (e.button == 2) {
        this.rightClick(e);
    } else if (e.button == 0) {
        this.mouseClick(e);
    }
}, true);

注意事项

1. 使用"contextmenu"方案时需要调用preventDefault()来阻止浏览器默认右键菜单
2. "mousedown"方案会与"click"事件有细微行为差异（如触发时机）
3. 需要考虑移动设备上的触摸事件兼容性

最佳实践建议

1. 对于3D场景中的交互，建议统一使用"mousedown"+"mouseup"组合来实现完整的点击交互
2. 如果需要区分单击、双击、长按等复杂交互，需要实现更精细的事件处理逻辑
3. 在Web3D应用中，通常需要禁用默认的右键菜单以避免干扰用户体验

总结

这个问题的解决不仅修复了右键点击失效的bug，更重要的是提醒开发者在处理用户输入时需要考虑不同输入设备和浏览器的行为差异。在Web3D开发中，完善的输入处理系统是创造流畅交互体验的基础。