使用JavaScript使用透明图像创建可扩展的覆盖

我在我的页面上有不同的位置提供横幅广告。这些广告在运行时从第三方网站加载，大小不一

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

如何使用JavaScript创建这些可扩展的 透明图像

如果有人点击透明图像，是否也会点击底层广告

---

很明显，我不想在上面放一张图片，然后在回答您的问题时停止对底层实际广告的点击：

首先，如果广告使用的iFrame来自与页面不同的域，那么您的功能就会受到很大限制。在这种情况下，你所能做的就是用你自己页面中的透明对象覆盖广告，当你这样做时，广告将不再收到点击

如果广告未使用来自页面以外的其他域的iFrame，则您有以下两个问题的选项：

1） 您可以使用javascript创建一个透明的div，并将其放置在与广告相同的父级中。然后，您可以使用css定位将其放置在广告的顶部，如果这是您真正想要做的。定位的细节取决于广告本身的定位方式。或者，如果广告本身只是一个div，您可以在广告中插入一个透明div，并调整其大小，使其完全覆盖广告的所有区域。透明对象将收到初始单击，但单击将“冒泡”到父对象，即广告

2） 单击放置在广告上方的透明对象将导致单击首先转到透明对象，而不是广告。单击将转到被单击的最顶部对象，尽管单击将冒泡到父对象。因此，如果广告本身是父对象，那么单击也会转到广告

---

如果您只是想知道点击的情况，那么最好只为现有广告上的点击添加自己的eventListener，而不在其上插入另一层。您必须等待广告出现，找到正确的对象并插入您自己的eventListener（假设广告不是使用来自不同域的iFrame插入的）。

您可以在整个文档上附加一个click listener，并且每当单击发生时，您可以检查点击是否来自广告，并进行处理。

这假设点击将从广告冒泡到文档。这可能是真的，也可能不是真的。停止传播事件时，可以中断任何事件委派。这就是为什么这种技术通常被认为是反模式的。