狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

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