5.0 label无法监听事件

[shield2018]

问题描述

使用监听无法监听label

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

查看源码发现在事件处理时只会处理 component、element 类型的node，label生成的node根结点不在可响应的类型中。

G2/src/interaction/event.ts

Lines 51 to 57 in ae4ab58

	// If target is element or child of element.
	const elementRoot = maybeElementRoot(target);
	// If target is component or child of component.
	const componentRoot = maybeComponentRoot(target);
	const root = elementRoot || componentRoot;
	if (!root) return;
	const { className: elementType, markType } = root;

重现链接

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

[pearmini]

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

[shield2018]

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

[shield2018]

另外

G2/src/shape/text/advance.ts

Lines 133 to 139 in 7792a37

	className,
	// Do not pass className
	class: _c,
	transform,
	rotate,
	labelTransform,
	labelTransformOrigin,

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

[pearmini]

这里为什么限制事件响应？后续每次发现无法响应的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 拿到内部的元素，然后操作。