Javascript 使身体背景图像作为链接

我在网上读过很多东西，但我还没有找到一种方法让它发挥作用

我想要的是：

---

我有一个身体背景图片，我被要求把它作为一个广告链接。。问题是，无论我尝试什么，都会使整个页面成为一个链接，而我只希望网页的背景充当链接。有没有可能，通过html和css？甚至使用javascript？任何解决方案都是可以接受的。。。我被卡住了…先谢谢你

您不能将背景图像作为链接。您可以使用JS捕捉主体上的所有点击，但不能捕捉其子对象上的点击

// This is not cross browser, that would be a separate question
document.body.onclick = function(e) {
  if (e.target === document.body) {
      window.location = "link.html"
  }
}

您可以将jQuery用于跨浏览器版本

$('body').click(function(e){
    if (e.target === this) {
        window.location = "link.html"
    }
});

如果您想给背景以光标的外观，可以应用以下CSS

body {
   background-image: url(http://www.blutest.com/sites/default/files/butterfly2_large_0.jpg);
   cursor: pointer;
}

body, html {
   width: 100%;
   height: 100%;
}

body * {
  cursor: default;
}
​

---

请在操作中查看它

您不能将背景图像作为链接。您可以使用JS捕捉主体上的所有点击，但不能捕捉其子对象上的点击

// This is not cross browser, that would be a separate question
document.body.onclick = function(e) {
  if (e.target === document.body) {
      window.location = "link.html"
  }
}

您可以将jQuery用于跨浏览器版本

$('body').click(function(e){
    if (e.target === this) {
        window.location = "link.html"
    }
});

如果您想给背景以光标的外观，可以应用以下CSS

body {
   background-image: url(http://www.blutest.com/sites/default/files/butterfly2_large_0.jpg);
   cursor: pointer;
}

body, html {
   width: 100%;
   height: 100%;
}

body * {
  cursor: default;
}
​

---

使用jQuery可以检测事件是否直接发生在身体上：

$('body').on('click', function(e) {
    if( e.target != this ) return;
    window.location = 'http://google.com';
});

---

使用jQuery，您可以检测事件是否直接发生在主体上：

$('body').on('click', function(e) {
    if( e.target != this ) return;
    window.location = 'http://google.com';
});

这里没有 在主体视图中保留页面分割

将onclick添加到正文，并将onclick添加到页面

在页面中，单击添加事件。停止播放 在主体视图中保留页面分割

将onclick添加到正文，并将onclick添加到页面

在页面中，单击添加事件。停止播放

这是一种极为恼人和普遍讨厌的做法。用户应该能够点击白色*而不会产生令人惊讶的效果

事实上，我是在谷歌搜索阻止这种恶劣的人类剥削的方法时发现你的问题的，我发誓永远抵制任何以这种方式做广告的供应商

*当然，白色的隐喻性概念包括主版面之外的任何区域或侧边栏内容下方的任何区域（如果侧边栏比主栏短），而不管该区域是白色、纯色还是有背景图像。

不要这样做

这是一种极为恼人和普遍讨厌的做法。用户应该能够点击白色*而不会产生令人惊讶的效果

事实上，我是在谷歌搜索阻止这种恶劣的人类剥削的方法时发现你的问题的，我发誓永远抵制任何以这种方式做广告的供应商

---

*当然，白色的隐喻性概念包括主布局之外的任何区域或侧边栏内容下方的任何区域（如果侧边栏比主栏短），而不管该区域是白色、纯色还是背景图像。

WOHOOO，没有键盘导航的人不能使用您的广告！赢从可用性的角度来看，这听起来很糟糕。无论你如何实现它，它都会捕获各种点击：错误点击、为了复制而突出显示等等。我不希望这样实现它，但我的雇主和他的客户……哇哦，没有键盘导航的人不能使用你的广告！赢从可用性的角度来看，这听起来很糟糕。无论你如何实现它，它都会捕获各种点击：错误点击、为了复制而突出显示等等。我不希望这样实现它，但我的雇主和他的客户……这不起作用，它不会使身体可点击，尽管我放了光标：指针，适当的光标出现在整个页面上-我只想显示背景，但你不能单击正文..这确实有效。。。你不明白它是干什么的。。。主体是可单击的，但它不是链接，因此手光标不会显示。如果需要手动光标，则必须添加光标：指向主体的指针，然后将其从顶层子对象中删除。我看到这里的唯一问题是，如果中间有一个div，有一些基本的文本，这个部分也是可以链接的。你怎么能只链接背景而不链接居中div中的内容。@Renezamit我不知道你的意思这里有一个示例，其中div中的文本不可单击。。。在最初的示例中，您可以观察到相同的情况，因为您可以单击图像而不执行任何操作happens@ReneZammit如果你的意思是一个有背景的div，你只想背景可以点击，那么这不是问题的一部分。这个问题是关于身体背景图像的。有许多相同的事情可以实现相同的目标。你应该问一个新问题，如果你想这样做的话，从这里创建一个链接。这不起作用，它不能使主体可点击，虽然我把光标：指针，适当的光标出现在整个页面上-我只想背景，但你不能点击主体..这确实起作用。。。你不明白它是干什么的。。。主体是可点击的，但不是链接

---

，因此不会显示手动光标。如果需要手动光标，则必须添加光标：指向主体的指针，然后将其从顶层子对象中删除。我看到这里的唯一问题是，如果中间有一个div，有一些基本的文本，这个部分也是可以链接的。你怎么能只链接背景而不链接居中div中的内容。@Renezamit我不知道你的意思这里有一个示例，其中div中的文本不可单击。。。在最初的示例中，您可以观察到相同的情况，因为您可以单击图像而不执行任何操作happens@ReneZammit如果你的意思是一个有背景的div，你只想背景可以点击，那么这不是问题的一部分。这个问题是关于身体背景图像的。有许多相同的事情可以实现相同的目标。你应该问一个新问题，如果你想问这个问题，那么从这里创建一个链接