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

Question

我在我的页面上有多个位置可以转换横幅广告。这些广告在运行时从第三方网站加载，大小各不相同。

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

1. 我如何使用 JavaScript 来创建这些可扩展的覆盖物透明图片
2. 如果有人点击透明图片，是否也会点击底层广告？

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

Answer 1

回答您的问题:

首先，如果广告使用来自与页面不同的域的 iframe，那么您可以做的事情就会受到更多限制。在这种情况下，您所能做的就是用您自己页面中的透明对象覆盖广告，当您这样做时，广告将不再获得点击。

如果广告不使用来自与页面不同的域的 iframe，那么您有以下两个问题的选项:

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

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

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