iframe是一個(gè)獨(dú)立的文檔樹，是一個(gè)沙箱，鼠標(biāo)事件終止于iframe文檔根部,無法冒泡到外層。

復(fù)現(xiàn)

最近寫dooringx-lib時(shí)遇到了個(gè)巨大難題。

我試著在編輯器的畫布中使用iframe，然后iframe中做一個(gè)可以拖拽選擇的效果，這時(shí)這個(gè)坑就出現(xiàn)了。

也就是我在iframe中按住鼠標(biāo)左鍵，然后移出iframe后松開鼠標(biāo)左鍵，此時(shí)，父頁面無法監(jiān)聽到mouseup事件。

于是我還整了很多騷操作，一開始我覺得可能是preventdefault搞得鬼，把所有preventdefault都刪了。發(fā)現(xiàn)不行。

然后在iframe里用postmessage告訴父頁面左鍵點(diǎn)擊，讓父頁面dispatch一個(gè)假的mousedown事件，發(fā)現(xiàn)還是不行。（沒法傳遞真的mouseEvent事件，因?yàn)闀?huì)報(bào)錯(cuò)：Failed to execute ‘postMessage’ on ‘Window’: MouseEvent object could not be cloned）

解決方案

在我研究半天后，找到以下2個(gè)方案：

1、創(chuàng)建iframe時(shí)就給個(gè)遮罩，相當(dāng)于所有操作都在遮罩上完成。缺點(diǎn)就是iframe里自己本來有很多的事件就無法觸發(fā)！所以如果這么操作，那么就要把事件都改到遮罩上，然后給iframe里面進(jìn)行通信。

2、使用mousemove事件。我發(fā)現(xiàn)雖然沒有觸發(fā)mouseup但是能觸發(fā)mousemove，既然可以監(jiān)聽到iframe里的點(diǎn)擊，那么再加上mousemove，在限定條件下就可以完成想要的效果。

如果時(shí)間緊迫還是用第二種方式，如果時(shí)間充足就使用第一種方式，畢竟除了up外，還可能有別的iframe坑需要填。

版權(quán)聲明：本文為博主原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接和本聲明。

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