KonvaJS中如何区分鼠标左右键点击事件

在KonvaJS图形库的使用过程中，开发者经常会遇到需要区分鼠标左右键点击事件的需求。本文将详细介绍如何在KonvaJS中实现这一功能。

问题背景

当我们在KonvaJS中为图形元素添加点击事件监听时，默认情况下无论是鼠标左键还是右键点击都会触发相同的事件处理器。这在某些场景下可能会带来问题，比如我们可能希望右键点击时显示上下文菜单而不触发常规的点击逻辑。

解决方案

KonvaJS的事件对象中包含了原生DOM事件的信息，我们可以通过访问evt.evt.button属性来判断具体是哪个鼠标按钮触发了事件。

鼠标按钮代码对应关系

• 0: 主按钮（通常是鼠标左键）
• 1: 辅助按钮（通常是鼠标中键）
• 2: 次要按钮（通常是鼠标右键）

实现示例

circle.on('pointerdown', function(evt) {
    if(evt.evt.button === 0) {
        // 左键点击处理逻辑
        console.log('左键点击');
    } else if(evt.evt.button === 2) {
        // 右键点击处理逻辑
        console.log('右键点击');
    }
});

实际应用场景

1. 游戏开发：在游戏中，左键和右键通常执行不同的操作
2. 绘图应用：左键绘图，右键擦除
3. 上下文菜单：右键点击显示自定义菜单

注意事项

1. 在移动设备上，这些事件可能表现不同
2. 某些浏览器可能有不同的默认行为，特别是在右键点击时
3. 如果需要完全阻止右键的默认行为（如显示浏览器上下文菜单），还需要调用evt.evt.preventDefault()

通过这种方式，开发者可以精确控制不同鼠标按钮触发的行为，为用户提供更丰富的交互体验。