檢測點擊外部div不工作，如果點擊目標是iframe

所以我有我寫的對話框，它關閉時點擊外部（沒有覆蓋/背景）。檢測點擊外部div不工作，如果點擊目標是iframe

它很好地工作除非有一個iframe，在這種情況下我的外部點擊監聽器永遠不會被調用。

這裏是a JSBIN來說明問題。（http://jsbin.com/vuneyopedu/edit?js,console,output）

要在下面的截圖簡要說明：

點擊對話框RED增量。
單擊外部對話框（黃色和綠色）應該減少，但只有黃色纔有效。
點擊時之外的點擊事件監聽器永遠不會被調用iframe（GREEN）

的問題是 - 如何使點擊什麼紅場外（具體點擊的iframe）減少數量。（或關閉對話框，在「真實」世界中）

來源

2016-01-25 Ben

如何將事件綁定到iframe的文檔。

iframes = document.getElementsByTagName('iframe'); 
iframesArray = Array.prototype.slice.apply(iframes); 

iframesArray.forEach(function(frame) { 
    frame.contentWindow.document.addEventListener('click', function() { 
    inc(); 
    }, true); 
});

來源

2016-01-25 19:23:38

作品！謝謝！ – Ben

如果iframe是別人的網站，而不是你的代碼？ – trusktr

這裏的正確方法是對模態使用模態和最強的用例之一。通過設計模式可以防止點擊落入下面的元素，因此不需要處理iframe問題或e.stopPropagation()或其他任何問題的副作用。它也使定位非常乾淨。

作爲一個側面說明，目前公認的答案是一個非常貧窮的方法，因爲它依賴於添加iFrame中的事件處理程序，然後綁定到父容器窗口。這是錯誤的在許多層面上：沒有來自不同域的分離的擔憂，IFRAME會被阻止，由於CORS，IFRAME將與任何和所有的父母很好，即使登記在不需要的時候，等

來源

2017-10-10 07:44:51 aleemb

檢測點擊外部div不工作，如果點擊目標是iframe

回答

相關問題