关于微前端:无界微前端子应用使用原生js绑定事件后获取etarget为null解决办法

当咱们应用微前端时候，不得不用原生js绑定事件，且要获取以后绑定事件的dom时候，发现没在微前端环境中e.targe是有值的，但放到微前端环境下e.target就成了null, 导致后续操作没法实现，影响应用，因而能够应用一下形式解决。

问题：

document.getElementById('rightMenu').onmouseleave = function (e) {
    console.log(e.target)
    // 在非微前端环境中打印成果为：以后绑定事件的dom 
    // 在微前端环境中打印成果为： null
}

解决办法：

document.getElementById('rightMenu').onmouseleave = function (e) {
        var composedTarget = (e.composed && e.composedPath())
        var target = composedTarget[0]
        if (target) {
            // 你要解决的事件
        } else {
            console.error('target没有获取到')
        }
    console.log(target)
    // 在非微前端环境中打印成果为：以后绑定事件的dom 
    // 在微前端环境中打印成果为： 以后绑定事件的dom 
}

如果你比拟仔细想辨别是否在微前端环境中，再应用不同的形式获取e.target的话，就按上面形式：

1. 找到以后微前端的shadowRoot（这里以无界微前端为例, 其余微前端环境：例如：乾坤，MicroApp）

   // 无界：window.__POWERED_BY_WUJIE__, 乾坤：window.__POWERED_BY_QIANKUN__, MicroApp: window.__MICRO_APP_ENVIRONMENT__
   if (window.__POWERED_BY_WUJIE__) {
    window.$wujie.shadowRoot.querySelector('#rightMenu').addEventListener('mouseleave', e => {
          var composedTarget = (e.composed && e.composedPath())
          var target = composedTarget[0]
          if (target) {
              // 你要解决的事件
          } else {
              console.error('target没有获取到')
          }
     })
   }