Detect whether a click event triggered from any of the elements.
- 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
Assessment
This issue has not been assessed yet.