Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

echarts不会不能触发默认的事件 #45

Closed
changqingom opened this issue Nov 27, 2019 · 6 comments
Closed

echarts不会不能触发默认的事件 #45

changqingom opened this issue Nov 27, 2019 · 6 comments

Comments

@changqingom
Copy link

ol-echarts存在echarts自身事件不触发情况

ol3-echarts正常

鼠标移入饼图和点击图例不处罚对应事件
地址:https://codesandbox.io/s/ol-echarts-example-vqtn5?autoresize=1&fontsize=14&theme=dark

@sakitam-fdd
Copy link
Owner

@changqingom 这个看起来是新版ol引发的问题,我抽空看下

@changqingom
Copy link
Author

@sakitam-fdd 我自己尝试解决,但是卡在了echarts自身事件交互的逻辑这,希望您处理后可以分享下思路 :)

@sakitam-fdd
Copy link
Owner

@changqingom 刚刚查了一下,应该是 openlayer的事件处理这边有些变化,事件捕获到 ol-overlaycontainer-stopevent 就终止了。临时解决的话可以暂时继承 Map:

class OMap extends Map {
  handleMapBrowserEvent(mapBrowserEvent) {
    if (!this.frameState_) {
      // With no view defined, we cannot translate pixels into geographical
      // coordinates so interactions cannot be used.
      return;
    }
// 注释掉事件阻止
    // let target = /** @type {Node} */ (mapBrowserEvent.originalEvent.target);
    // while (target) {
    //   if (target.parentElement === this.overlayContainerStopEvent_) {
    //     return;
    //   }
    //   target = target.parentElement;
    // }
    mapBrowserEvent.frameState = this.frameState_;
    const interactionsArray = this.getInteractions().getArray();
    if (this.dispatchEvent(mapBrowserEvent) !== false) {
      for (let i = interactionsArray.length - 1; i >= 0; i--) {
        const interaction = interactionsArray[i];
        if (!interaction.getActive()) {
          continue;
        }
        const cont = interaction.handleEvent(mapBrowserEvent);
        if (!cont) {
          break;
        }
      }
    }
  }
}

并且开启

{
    stopEvent: true,
    insertFirst: true,
}

示例:https://codesandbox.io/s/ol-echarts-example-sfzvh

目前没办法从插件本身处理,如果可能的话可以去mock所有的鼠标事件,可以尝试一下

@changqingom
Copy link
Author

@sakitam-fdd ok! 谢谢分享

@kyleinfo
Copy link
Contributor

维护项目的时候也遇到了这个问题. 看了下代码. ol-overlaycontainer 现在不在事件分发路径上了. 感觉更改 ol-overlaycontainer-stopevent 的约定不好. 只能 mock 了, zrender 监听的事件, 只有 mousemove 这个事件比较重要, 又没有 mock.

示例: https://codesandbox.io/s/ol-echarts-example-hs7c5

@changqingom
Copy link
Author

@kyleinfo 感谢! 那我就写个交互扩展去做这块的派发了

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants