apache / apache/echarts

Detect whether a click event triggered from any of the elements.

Open
#12,043 2 comments 0 reactions 0 assignees View on GitHub
en new-feature topic: event
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### What problem does this feature solve?
The scenario:

Check the case: https://www.echartsjs.com/examples/en/editor.html?c=pie-rich-text

If I want to implement that: click the blank area, deselect all of the selected sectors. How to do it?

Currently, potential way:

```js
var clickedOnElement = false;

chart.on('click', 'series.pie', function chartClickHandler(params) {
clickedOnElement = true;
});

function zrClickHandler(params) {
if (clickedOnElement) {
clickedOnElement = false;
chart.dispatchAction( ... ); // unselect all of the pie charts
}
}
// If no this setting, the `zrClickHandler` will be called before
// the `chartClickHandler`
// Check the code of `echarts.js` for more details.
zrClickHandler.zrEventfulCallAtLast = true;

chart.getZr().on('click', zrClickHandler);
```

However, it is not a good way.

### What does the proposed API look like?
Enable echarts only use echarts event to implement it rather than depending on zrender events.

```js
// blank event is triggered when clicked but no normal echarts click event triggered.
chart.on('click', 'blank', function () {
// unselect all of the sectors.
});
```

Moreover, we can provide zr event registering via echarts, where the `zrEventfulCallAtLast` can be resolved:
```js
chart.on('click', 'all', function () {
// The listener will be called after echarts built-in event called,
// rather than before them. That is, the listener is auto marked as
// `zrEventfulCallAtLast`
});
```
The naming of 'all' can be further discussed.

All of the implement of it can be in `echarts.js` `_initEvents`.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.