使用JavaScript創建使用透明圖像的可展開疊加層

Question

我在我的頁面上有多個位置，我們在其中投放橫幅廣告。這些廣告在運行時從第三方網站加載，並且大小各不相同。

我希望在這些廣告中添加一個透明圖像，這樣當有人點擊廣告時，我可以觸發點擊事件並進行一些處理。 我的問題是：

1. 我如何使用JavaScript如果有人點擊了透明圖像上創建的 透明圖像
2. 這些擴張overalys，這將導致對潛在的廣告太點擊？

很顯然，我不想把圖像放在上面，然後停在底層的實際廣告

Answer 1

點擊在回答你的問題：

首先，如果廣告使用I幀從一個不同的域名比頁面，那麼你可以做更多的限制。在這種情況下，您所能做的只是在自己的網頁上放置一個透明對象，當您這樣做時，廣告不會再獲得點擊。

如果廣告不會比頁面不同的域使用iframe的，那麼你有這些選項爲您的兩個問題：

1）您可以創建一個透明的股利與JavaScript，將其放入相同的父作爲廣告。然後，如果這就是您真正想要做的事情，那麼可以使用CSS定位來放置廣告。該定位的細節取決於廣告本身的定位。或者，如果廣告本身只有一個div，則可以在廣告中插入一個透明的div並對其進行尺寸調整，使其完全覆蓋廣告的所有區域。透明對象會收到初始點擊，但點擊會「泡」到父廣告。

2）點擊位於廣告上方的透明對象將導致點擊首先進入透明對象，而不是廣告。點擊進入被點擊的最頂端的對象，儘管點擊會起泡到父對象。所以，如果廣告本身是父對象，那麼點擊也會轉到廣告。

如果您只想瞭解點擊次數，那麼您最好只添加自己的eventListener來點擊現有廣告，而不是在其上方插入另一個圖層。您必須等到廣告出現後，找到正確的對象並插入您自己的eventListener（假設該廣告未使用來自其他域的iframe插入）。

Answer 2

您可以在整個文檔上附加一個點擊監聽器，只要發生點擊，就可以檢查該點擊是否來自廣告。並做你的處理。