antvis/G2

5.0 label无法监听事件 #6004

shield2018 posted onGitHub

问题描述

使用监听无法监听label

chart.on("label:click", () => {
      console.log("点击了");
});

查看源码发现在事件处理时只会处理 component、element 类型的node,label生成的node根结点不在可响应的类型中。 https://github.com/antvis/G2/blob/ae4ab583f25d356a0339612da7da8e8222021faf/src/interaction/event.ts#L51-L57

重现链接

https://codesandbox.io/p/sandbox/g2-label-click-thtzjq

重现步骤

1、点击“转换率”文字 2、控制台不会输出"点击了"

预期行为

可以监听label的事件

平台

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

屏幕截图或视频(可选)

No response

补充说明(可选)

No response


这个确实是一个问题,方便提一个 PR 来修复一下吗?

posted by pearmini over 1 year ago

这里为什么限制事件响应?后续每次发现无法响应的node,都需要加个判断。 为什么不根据classname,用 chart.on(${className}:${eventType}) 给任意node添加事件监听,类似html dom

posted by shield2018 over 1 year ago

另外 https://github.com/antvis/G2/blob/7792a37225553da33fb9f04ff77ee2fbbc18e325/src/shape/text/advance.ts#L133-L139

Advance 创建的text,故意pass了classname,会导致无法直接对text监听。是考虑到Advance是一个整体,只能对整体操作么?

posted by shield2018 over 1 year ago

这里为什么限制事件响应?后续每次发现无法响应的node,都需要加个判断。

因为 chart.on 不全是透传事件,有些事件需要提供额外数据:

chart.on("label:click",  e => console.log(e.data.data))

当然目前代码确实有问题,是可以透传剩余事件的,更好的写法如下:

if (maybeElementRoot(target)) {
  //...
} else if (maybeComponentRoot(target)) {
  // ...
} else if (maybeLabelRoot(target)) {
  // ...
} else {
  emitter.emit(`${className}:${eventType}`, e1);
}

Advance 创建的text,故意pass了classname,会导致无法直接对text监听。是考虑到Advance是一个整体,只能对整体操作么?

你可以通过 event.target 拿到 Advance 对象,然后通过 Advance 拿到内部的元素,然后操作。

posted by pearmini over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests