Question

点击html正文时，我正试图将用户发送到另一个页面：

JavaScript c.js：

function clickBody(){
    window.location.href = '/';
}

HTML：

<!DOCTYPE html>
<html>
<head>
    <script src="c.js"></script>
</head>

<body onclick="clickBody();">
</body>  
</html>

我可以从控制台运行该功能，但点击<body>无效。

Answer 1

<body>元素为空。您必须在CSS中更改其高度，或在其中放入一些文本。

此外，使用element.addEventListener()可能是个好主意。请参阅addEventListener vs onclick。

请参阅代码段：

function clickBody() {
    window.location.href = '/'
}
document.body.addEventListener("click", clickBody)

<!DOCTYPE html>
<html>
<head>
    <script src="c.js"></script>
</head>

<body>
  <p>Try clicking me.</p>
</body>  
</html>

Answer 2

<body>元素没有高度，添加类似下面的内容：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
     height: 500px;
    }
  </style>
  <script src="c.js"></script>
</head>

<body onclick="clickBody();">

</body>  
</html>

Answer 3

我使用 window 而不是 document.body

window.onclick = () => {
console.log('Page clicked')
}

<h1>click anywhere on this page</h1>

为什么body元素上的onclick事件不起作用？

3 个答案: