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

Question

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

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

1. 如何使用JavaScript创建透明图像的这些可扩展叠加层
2. 如果有人点击透明图片，是否也会导致点击底层广告？

显然，我不希望将图片放在顶部，然后停止点击底层实际广告

Answer 1

在回答您的问题时：

首先，如果广告使用的是来自网页之外的其他域的iframe，则您的工作能力将受到更大的限制。 在这种情况下，您所能做的就是在您自己的页面中覆盖一个透明的对象，当您这样做时，该广告将不再获得点击。

如果广告没有使用与页面不同域中的iframe，那么您可以针对以下两个问题选择以下选项：

1）您可以使用JavaScript创建一个透明的div，并将其放置在与广告相同的父对象中。 如果您确实要这样做，则可以使用css定位将其定位在广告的顶部。 定位的细节取决于广告本身的定位。 或者，如果广告本身只是一个div，则可以在广告中插入一个透明的div并调整其大小，以使其完全覆盖广告的所有区域。 透明对象将获得初始点击，但随后该点击将“冒泡”直至父级（即广告）。

2）点击位于广告上方的透明对象，将导致点击首先到达透明对象，而不是广告。 单击将转到被单击的最上面的对象，尽管单击将冒泡到父对象。 因此，如果广告本身是父对象，则点击也将到达广告。

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

Answer 2

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