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

Question

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

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

1. 如何使用JavaScript創建透明圖像的這些可擴展疊加層
2. 如果有人點擊透明圖片，是否也會導致點擊底層廣告？

顯然，我不希望將圖片放在頂部，然后停止點擊底層實際廣告

Answer 1

在回答您的問題時：

首先，如果廣告使用的是來自網頁之外的其他域的iframe，則您的工作能力將受到更大的限制。 在這種情況下，您所能做的就是在您自己的頁面中覆蓋一個透明的對象，當您這樣做時，該廣告將不再獲得點擊。

如果廣告沒有使用與頁面不同域中的iframe，那么您可以針對以下兩個問題選擇以下選項：

1）您可以使用JavaScript創建一個透明的div，並將其放置在與廣告相同的父對象中。 如果您確實要這樣做，則可以使用css定位將其定位在廣告的頂部。 定位的細節取決於廣告本身的定位。 或者，如果廣告本身只是一個div，則可以在廣告中插入一個透明的div並調整其大小，以使其完全覆蓋廣告的所有區域。 透明對象將獲得初始點擊，但隨后該點擊將“冒泡”直至父級（即廣告）。

2）點擊位於廣告上方的透明對象，將導致點擊首先到達透明對象，而不是廣告。 單擊將轉到被單擊的最上面的對象，盡管單擊將冒泡到父對象。 因此，如果廣告本身是父對象，則點擊也將到達廣告。

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

Answer 2

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