iframe是一個獨立的文檔樹，是一個沙箱，鼠標事件終止于iframe文檔根部,無法冒泡到外層。

復(fù)現(xiàn)

最近寫dooringx-lib時遇到了個巨大難題。

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

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

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

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

解決方案

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

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

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

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

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

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