鼠标事件mousemove拖动到iframe上监听失效问题

问题：监听鼠标拖动事件mousemove，当鼠标移动到页面嵌的iframe上时，事件无法被监听到，当鼠标移出iframe后，事件又能被监听到了。

解决：可以创建一个层级高的div覆盖在整个项目上面，然后监听该div的鼠标移动事件。

const mask = document.createElement('div')
mask.style.cssText = 'position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;z-index: 9999;'
mask.setAttribute('id', 'mousemoveMask')
document.body.append(mask)
mask.addEventListener('mousemove', this.handleMousemove)

顺便介绍下vh（viewport weight）和vw（viewport height）单位：

1. vw和vh是前端开发中的两个动态单位，是相对于网页视口的单位；
2. 1vw，1vh和百分比不同的是，vw和vh永远都是以视口作为参考，而百分比永远是以父元素作为参考
3. 系统会将视口的宽度和告诉分为100份，vw就占视口宽度的百分之一，1vh就占视口高度的百分之一

其实一句话概括就是vw和vh是两个动态单位，会随着视口大小的变化而变化。

结束监听鼠标监听事件时记得把遮罩层删掉：

const mask = document.getElementById('mousemoveMask')
mask && mask.removeEventListener('mousemove', this.handleMousemove)
mask && mask.remove()