关于微前端:无界微前端子应用使用原生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 没有获取到')
          }
     })
   }