GitLab

背景

在qiankun中子应用 pms-react-pc中使用了高德地图的new AMap.CircleEditor。如图所示

鼠标左键无法拖动圆形进行缩放，却穿透到地图上，导致地图被拖动。而鼠标右键却可以拖动圆形而不会导致地图canvas被拖动。
但是在非qainkun内嵌下却是正常的。

原因

通过阅读高德源码发现，内部的一些拖拽鼠标左键是使用的是 document.getElementXXX，而鼠标右键，也就是 event.button === 2 是使用的自挂载.
同时canvas 也是自挂载的事件，这就很奇葩了。
而我们的子应用是无法通过document获取到内部class和id的，需要承载 MainAppContext。
tip: 当然我们原本就知道qiankun和多数阿里内很多对外的服务部门“并不熟”，他们也没提供相互兼容，所以只能自行尝试解决。

解决方案

劫持鼠标左键事件的点击和抬起，并同步触发鼠标右键事件 event.button === 2，如图所示

为拖拽点元素添加绑定

结尾

从我们使用微应用之初，就已经和产品同步过会出现很多问题，因为三方工具，哪怕是阿里内部的三方工具，也几乎没见过对qiankun做过适配兼容的。
那么遇到的所有问题，我们也只能通过仅有的几种方法去尝试解决。

其一，google或者百度

但没几个工具能找到解决方案，尤其是阿里内部的一些三方平台，哪怕是github上提问，都会被忽略，个人认为是内部并不认可qiankun，绝大部分情况下，此方法行不通。

其二，阅读源码，找寻突破方案。

此方法比较靠谱，但是存在部分平台sdk是压缩后，并非开源的。总而言之需要一定的阅读代码能力，甚至有一定的阅读压缩代码的能力。

其三，书写侵入脚本，尝试适配shadowDom

这个对技术能力要求也比较高，尤其是工程化架构方面的。

最差的情况就是通过更改产品交互，降低用户体验。

规避有问题的交互，尝试用其他交互补偿，这是前三种方法都无法解决的时候，存在的保底方案。