使用JavaScript创建使用透明图像的可展开叠加层

Question

我在我的页面上有多个位置，我们在其中投放横幅广告。这些广告在运行时从第三方网站加载，并且大小各不相同。

我希望在这些广告中添加一个透明图像，这样当有人点击广告时，我可以触发点击事件并进行一些处理。 我的问题是：

1. 我如何使用JavaScript如果有人点击了透明图像上创建的 透明图像
2. 这些扩张overalys，这将导致对潜在的广告太点击？

很显然，我不想把图像放在上面，然后停在底层的实际广告

Answer 1

点击在回答你的问题：

首先，如果广告使用I帧从一个不同的域名比页面，那么你可以做更多的限制。在这种情况下，您所能做的只是在自己的网页上放置一个透明对象，当您这样做时，广告不会再获得点击。

如果广告不会比页面不同的域使用iframe的，那么你有这些选项为您的两个问题：

1）您可以创建一个透明的股利与JavaScript，将其放入相同的父作为广告。然后，如果这就是您真正想要做的事情，那么可以使用CSS定位来放置广告。该定位的细节取决于广告本身的定位。或者，如果广告本身只有一个div，则可以在广告中插入一个透明的div并对其进行尺寸调整，使其完全覆盖广告的所有区域。透明对象会收到初始点击，但点击会“泡”到父广告。

2）点击位于广告上方的透明对象将导致点击首先进入透明对象，而不是广告。点击进入被点击的最顶端的对象，尽管点击会起泡到父对象。所以，如果广告本身是父对象，那么点击也会转到广告。

如果您只想了解点击次数，那么您最好只添加自己的eventListener来点击现有广告，而不是在其上方插入另一个图层。您必须等到广告出现后，找到正确的对象并插入您自己的eventListener（假设该广告未使用来自其他域的iframe插入）。

Answer 2

您可以在整个文档上附加一个点击监听器，只要发生点击，就可以检查该点击是否来自广告。并做你的处理。