Question

我见过很多“包装”宽度为960px的网站。作为背景图片，他们有一个可点击的图像（某种广告），整个网页都在该图像上，如 this site 。你能给我一些教程或其他内容吗？

Answer 1

首先，您将广告图片作为网站背景，然后基本上您必须捕获整个主体上的点击，并检查它是否在页面内容的内部或外部。为此，您必须检查事件目标元素是否具有内容包装器（或多个包装器）作为其父节点之一 - 如果不是，则表示单击位于页面内容之外。

如果您想在StackOverflow上执行此操作，可以使用这段代码来完成。

$('body').bind('click', function(e){ 
    if(!$(e.target).closest('#content').length) {
        alert('ad outside content clicked');
    }
});

随意在你的javascript控制台中尝试 - 所以它正在使用jQuery以便它可以工作 - 当你点击内容区域之外（在屏幕的边缘）时，你会收到点击广告的提示。

您显然必须使用您对商业广告进行的任何回调替换提醒 - 打开新网页或其他

希望有所帮助

汤姆

PS。请记住，此示例使用jQuery是为了简单而不是本机JS，因此您需要使用该库才能使用它。

Answer 2

汤姆的代码是一个巨大的帮助，但我需要这种广告的指针光标，但不是所有的网站，所以我想出了这个解决方案：

$('body').bind('click', function(e) {
    if ($(e.target).closest('#container').size() == 0) {
        alert('click');
    }
}).bind('mouseover', function(e) {
    if ($(e.target).closest('#container').size() == 0) {
        $(this).css('cursor','pointer');
    } else {
        $(this).css('cursor','default');
    }
});

HTML背景广告

2 个答案: