2

当我们使用微前端时候,不得不用原生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__) {
     //这里我以无界微前端为例子,其他微前端请自己找一下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没有获取到')
           }
      })
    }

smallStone
419 声望71 粉丝

前端一枚^_-