如何监听 Port 的点击事件并获得对应的 Port ID

[NiCools]

问题描述

如图。请问我怎样可以知道我点击的是哪个连接桩呢，我想拿到对应连接桩的id。通过绑定自定义点击事件(port-click)也不行，拿到的node节点的数据.

重现链接

https://codesandbox.io/s/cranky-snow-xwum3g?file=/index.ts

重现步骤

1

预期行为

期望能拿到数据

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• X6 版本: [1.28.2 ... ]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[x6-bot]

👋 @NiCools

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.

To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[tonywu6]

这里猜测你想要拿到的是单纯的「单击了哪一个链接桩」，而不是「哪两个链接桩被连接起来」；如果是想要获取连接的信息，可以监听 edge:connected

---

对于自定义事件：确保事件的名称在声明处和监听处是完全相同

portNameLabel: {
  // ...,
  event: "node:port-click"
}
graph.on("node:port-click", /* ... */)

对于如何获得 port 本身的点击事件，这里有一个可以监听节点事件（你的 demo 的做法），然后通过 Event.currentTarget.parentElement 获得链接桩对应的 SVG 元素的 parent 元素，这个 parent 元素是一个 <g> 元素，它带有一个 port 属性，属性存放链接桩的 ID;

on("node:port-click", ({ e }) => {
  console.log(e.currentTarget.parentElement.getAttribute("port"));
});

https://codesandbox.io/s/antv-x6-port-clicking-yhqrqm?file=/index.ts:2374-2441

一些注意的事情

• 使用 Event.currentTarget 而不是 Event.target;
• 这里依赖的是一个不成文的特性，即 x6 使用一个 <g> 元素将 port 的 markup 放置在一起，而且 x6 会为这个 <g> 元素添加一个 port 属性以记录对应 port 的 ID —— 这不是公开 API 的一部分，因此它的稳定性和可用性我们不作保证（即便这个特性被改变的概率很小）

这里我们是应该在未来提供和 port 相关的更多工具

[NewByVector]

请问上面的回答有解决你的问题吗，为了高效沟通，我们暂时关闭这个 issue，如果有必要，请重新开一个新的 issue。

[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.