iframe是一个独立的文档树，是一个沙箱，鼠标事件终止于iframe文档根部,无法冒泡到外层。

复现

最近写dooringx-lib时遇到了个巨大难题。

我试着在编辑器的画布中使用iframe，然后iframe中做一个可以拖拽选择的效果，这时这个坑就出现了。

也就是我在iframe中按住鼠标左键，然后移出iframe后松开鼠标左键，此时，父页面无法监听到mouseup事件。

于是我还整了很多骚操作，一开始我觉得可能是preventdefault搞得鬼，把所有preventdefault都删了。发现不行。

然后在iframe里用postmessage告诉父页面左键点击，让父页面dispatch一个假的mousedown事件，发现还是不行。（没法传递真的mouseEvent事件，因为会报错：Failed to execute ‘postMessage’ on ‘Window’: MouseEvent object could not be cloned）

解决方案

在我研究半天后，找到以下2个方案：

1、创建iframe时就给个遮罩，相当于所有操作都在遮罩上完成。缺点就是iframe里自己本来有很多的事件就无法触发！所以如果这么操作，那么就要把事件都改到遮罩上，然后给iframe里面进行通信。

2、使用mousemove事件。我发现虽然没有触发mouseup但是能触发mousemove，既然可以监听到iframe里的点击，那么再加上mousemove，在限定条件下就可以完成想要的效果。

如果时间紧迫还是用第二种方式，如果时间充足就使用第一种方式，毕竟除了up外，还可能有别的iframe坑需要填。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/yehuozhili/article/details/118914339