自定义键盘事件和浏览器默认键盘事件冲突，比如mac下 meta+1 是切换到第一个标签页

[XueMeijing]

Describe the bug

例如这个官方demo：https://x6.antv.antgroup.com/examples/showcase/practices#flowchart

其中zoom事件代码为：

// zoom
graph.bindKey(['ctrl+1', 'meta+1'], () => {
  const zoom = graph.zoom()
  if (zoom < 1.5) {
    graph.zoom(0.1)
  }
})

ctrl+1 可以正常放大， meta+1 虽然也会放大，但是然后就会自动切到浏览器第一个标签页。
其他的类似，浏览器默认事件 meta+= 和 meta+- 也是控制变换的，如果zoom绑到这些按键也有问题。

另外有个奇葩的是4个方向键，比如meta+ArrowLeft 只会触发浏览器默认事件，不会触发自定义事件

Your Example Website or App

https://x6.antv.antgroup.com/examples/showcase/practices#flowchart

Steps to Reproduce the Bug or Issue

官方demo：https://x6.antv.antgroup.com/examples/showcase/practices#flowchart

mac电脑使用meta+1触发zoom事件

Expected behavior

自定义事件可以覆盖浏览器默认事件

Screenshots or Videos

No response

Platform

• OS: [macOS]
• Browser: [Chrome]
• Version: [119.0.6045.159]

Additional context

No response

[apankun]

在bindkey的回调中return false就可以
例如
// 画布放大缩小
this._graph.bindKey(["meta+-", "ctrl+-"], () => {
const cells = this._graph.getSelectedCells();
if (cells?.length) return;
const zoom = this._graph.zoom();
if (zoom <= 0.2) return;
this._graph.zoomTo(zoom - 0.1);
return false;
});

[XueMeijing]

在bindkey的回调中return false就可以 例如 // 画布放大缩小 this._graph.bindKey(["meta+-", "ctrl+-"], () => { const cells = this._graph.getSelectedCells(); if (cells?.length) return; const zoom = this._graph.zoom(); if (zoom <= 0.2) return; this._graph.zoomTo(zoom - 0.1); return false; });

感谢，其他快捷键加上return false 确实可以了，但是上下左右四个箭头meta+ArrowRight、meta+ArrowLeft等还是有问题

[apankun]

在bindkey的回调中return false就可以 例如 // 画布放大缩小 this._graph.bindKey(["meta+-", "ctrl+-"], () => { const cells = this._graph.getSelectedCells(); if (cells?.length) return; const zoom = this._graph.zoom(); if (zoom <= 0.2) return; this._graph.zoomTo(zoom - 0.1); return false; });

感谢，其他快捷键加上return false 确实可以了，但是上下左右四个箭头meta+ArrowRight、meta+ArrowLeft等还是有问题

我的做法是在加载画布的时候addeventlistener，然后将这些快捷键的操作preventDefault()了，然后dispose的时候卸载监听。
目前没有想到更好的做法，或者在keyboard这个插件加一个preventdefault的方法。

[XueMeijing]

在bindkey的回调中return false就可以 例如 // 画布放大缩小 this._graph.bindKey(["meta+-", "ctrl+-"], () => { const cells = this._graph.getSelectedCells(); if (cells?.length) return; const zoom = this._graph.zoom(); if (zoom <= 0.2) return; this._graph.zoomTo(zoom - 0.1); return false; });

感谢，其他快捷键加上return false 确实可以了，但是上下左右四个箭头meta+ArrowRight、meta+ArrowLeft等还是有问题

我的做法是在加载画布的时候addeventlistener，然后将这些快捷键的操作preventDefault()了，然后dispose的时候卸载监听。 目前没有想到更好的做法，或者在keyboard这个插件加一个preventdefault的方法。

我研究了下 keyboard源码，发现x6键盘事件用的 Mousetrap 这个库, 里面issue有人提到对于几个箭头来说，用的不是ArrowRight ArrowLeft，用的是right left... 太坑了

[x6-bot]

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.