diff --git a/__tests__/integration/api-chart-on-item-element.spec.ts b/__tests__/integration/api-chart-on-item-element.spec.ts index 95eccf7d23..3b218593b6 100644 --- a/__tests__/integration/api-chart-on-item-element.spec.ts +++ b/__tests__/integration/api-chart-on-item-element.spec.ts @@ -175,6 +175,14 @@ describe('chart.on', () => { await fired; }); + it('chart.on("plot:click", callback) should emit plot events', async () => { + await finished; + const [fired, resolve] = createPromise(); + chart.on(`plot:${ChartEvent.CLICK}`, () => resolve()); + dispatchFirstElementEvent(canvas, 'click', { detail: 1 }); + await fired; + }); + afterAll(() => { canvas?.destroy(); }); diff --git a/__tests__/plots/api/chart-on-item-element.ts b/__tests__/plots/api/chart-on-item-element.ts index a0522884ea..0207728389 100644 --- a/__tests__/plots/api/chart-on-item-element.ts +++ b/__tests__/plots/api/chart-on-item-element.ts @@ -24,6 +24,7 @@ export function chartOnItemElement(context) { chart.on('interval:click', log('interval:click')); chart.on('element:click', log('element:click')); + chart.on('plot:click', () => console.log('plot:click')); chart.on('interval:dblclick', log('interval:dblclick')); chart.on('interval:pointertap', log('interval:pointertap')); diff --git a/site/docs/manual/event.zh.md b/site/docs/manual/event.zh.md index 6a216afb70..c367373599 100644 --- a/site/docs/manual/event.zh.md +++ b/site/docs/manual/event.zh.md @@ -100,6 +100,12 @@ chart.on(`interval:${ChartEvent.CLICK}`, (ev) => { }); ``` +- 监听 Plot 区域事件 + +```js +chart.on('plot:click', (event) => console.log(event)); +``` + ### 点击事件 | 事件名 | 说明 | 回调参数 | diff --git a/src/interaction/event.ts b/src/interaction/event.ts index 6aa439ffa9..363f4e215f 100644 --- a/src/interaction/event.ts +++ b/src/interaction/event.ts @@ -19,6 +19,14 @@ function bubblesEvent(eventType, view, emitter, predicate = (event) => true) { if (!predicate(e)) return; const { target } = e; const { className: elementType, markType } = target; + + // Emit plot events. + emitter.emit(`plot:${eventType}`, e); + + // If target area is plot area, do not emit extra events. + if (elementType === 'plot') return; + + // Emit wrapped events. if (elementType === 'element') { const e1 = { ...e, @@ -27,10 +35,10 @@ function bubblesEvent(eventType, view, emitter, predicate = (event) => true) { }; emitter.emit(`element:${eventType}`, e1); emitter.emit(`${markType}:${eventType}`, e1); - return; + } else { + // @todo Handle click axis and legend. + emitter.emit(`${elementType}:${eventType}`, e); } - // @todo Handle click axis and legend. - emitter.emit(`${elementType}:click`); }; }