【javascript】mouseup与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坑需要填。