当我们使用微前端时候,不得不用原生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的话,就按下面方式:
找到当前微前端的shadowRoot(这里以无界微前端为例, 其他微前端环境:例如:乾坤,MicroApp)
// 无界:window.__POWERED_BY_WUJIE__, 乾坤:window.__POWERED_BY_QIANKUN__, MicroApp: window.__MICRO_APP_ENVIRONMENT__ if (window.__POWERED_BY_WUJIE__) { //这里我以无界微前端为例子,其他微前端请自己找一下shadowRoot获取方式 window.$wujie.shadowRoot.querySelector('#rightMenu').addEventListener('mouseleave', e => { var composedTarget = (e.composed && e.composedPath()) var target = composedTarget[0] if (target) { // 你要处理的事件 } else { console.error('target没有获取到') } }) }
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。