V4.8.23 在设置 modes.default=['drag-node', 'drag-canvas', 'zoom-canvas']后， 浏览器手机浏览模式 graph.on('node:click', ()=>{ }) 不生效

[mountain-has-tree]

Describe the bug

V4.8.23 在设置 modes.default=['drag-node', 'drag-canvas', 'zoom-canvas']（或者数组其中一个）后，监听事件graph.on('node:click', ()=>{ }) ，点击 node 触发不了事件，无任何反应， 在这样的情况下，如果点击 edge， 会报错：n.hasLocked is not a function 以下为代码，开在G6官网事例页面粘贴生效：

import G6 from '@antv/g6';

const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  layout: {
    type: 'force',
    linkDistance: 200
  },
  modes: {
    default: ['drag-node', 'drag-canvas', 'zoom-canvas']
  },
  defaultNode: {
    size: 15,
  },
});

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json')
  .then((res) => res.json())
  .then((data) => {
    graph.data({
      nodes: data.nodes,
      edges: data.edges.map(function (edge, i) {
        edge.id = 'edge' + i;
        edge.label = i;
        return Object.assign({}, edge);
      }),
    });
    graph.render();

    graph.on('node:click', function (e) {
      console.log(e, 'handle-click-node')
    });

    if (typeof window !== 'undefined')
      window.onresize = () => {
        if (!graph || graph.get('destroyed')) return;
        if (!container || !container.scrollWidth || !container.scrollHeight) return;
        graph.changeSize(container.scrollWidth, container.scrollHeight);
      };
  });

Your Example Website or App

https://codesandbox.io/p/sandbox/vigorous-bose-66kwsp?file=%2Fsrc%2FApp.jsx

Steps to Reproduce the Bug or Issue

1. 在G6 官网页面 粘贴 Describe the bug 中的代码
2. 打开控制台， 将浏览器切换为手机浏览模式
3. canvas渲染出来后， 点击 node 和点击 edge 或者
4. 打开 codesandbox
5. 打开控制台， 将浏览器切换为手机浏览模式
6. 点击 node 和点击 edge

Expected behavior

期待在v4的版本中可以修复

Screenshots or Videos

No response

Platform

• OS: [ macOS, Windows]
• Browser: [Chrome]
• Version: [4.8.23]

Additional context

No response

[github-actions[bot]]

hi @mountain-has-tree, welcome!

[github-actions[bot]]

Hi @mountain-has-tree, Please star this repo if you find it useful! Thanks :star:! 你好 @mountain-has-tree。如果该仓库对你有用，可以 star 一下，感谢你的 :star:!

[Rikka-S]

可以改成 graph.on('node:touchstart', ()=>{ }) 移动端

[HuColin]

darg-canvas 的内置 Behavior 里面 preventDefault 了，可以基于 内置 Behavior 去掉 preventDefault 试试

[github-actions[bot]]

This issue has been closed because it has been outdate for a long time. Please open a new issue if you still need help.

这个 issue 已经被关闭，因为 它已经过期很久了。 如果你仍然需要帮助，请创建一个新的 issue。