单击该如何设置页面的整个背景或正文以执行功能？
[英]How can I set the entire background or body of a page to execute a function when clicked?
问题描述
我正在寻找一个正在执行的功能的Web项目的整个背景/主体。 可以将主体设置为链接或按钮吗？
我还希望它保留在后台，因为我在页面的前面有另一个链接。
<html> <body> <a href="">Test link in front of page</a> <style> body{ background-color:aqua; } a{ color:white; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; margin: 0; } </body> </html>
作为一个直观的示例，我编写了一个代码段。 我的目标是使水色背景成为链接/按钮（将执行JS功能），但让白色链接保留在前面，作为指向网站的单独链接。
3 个解决方案
解决方案1
4 已采纳 2019-01-26 17:10:46
您可以将clickhandler添加到文档中：
document.addEventListener('click', () => console.log("hello"));
document.addEventListener('click', () => console.log("hello"));
body { background-color: aqua; height: 100%; } a { color: white; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; margin: 0; }
<a href="">Test link in front of page</a>
解决方案2
0 2019-01-26 17:18:34
理解：我相信您希望用户每次单击HTML文档正文时都运行一个函数
建议：您可以将事件监听器添加到文档中，只需单击一下即可调用所需的函数。 如果必须是主体而不是重叠的元素，则可以在函数中执行测试，以查看单击的元素是否是您预期的元素。 例如e.target.tagName ==“ BODY”
运行示例：
function myFunctionCall(e){ if (e.target.tagName == "HTML" || e.target.tagName == "BODY"){ alert ("HEYY YOU CLICKED ME "); } } document.addEventListener("click", myFunctionCall, false);
body{ background-color:aqua; } a{ color:white; margin: 0; position: absolute; text-align: center; top: 50%; transform: translateY(-50%); width: 100% }
<body > <a href="" >Test link in front of page</a> </body>
解决方案3
0 2019-01-26 17:21:20
您是否想将身体放在链接的前面？
<html> <head> <meta charset="utf-8"> <title>Example</title> <style> * { box-sizing: border-box; } body { background-color:aqua; } a.back { color:white; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; margin: 0; z-index: -1; } p { width: 50%; height: 250px; margin: 1% auto; padding: 25% 2%; background-color: rgba(12, 12, 12, .4); text-align: center; color: red; border-radius: .2rem; } </style> </head> <body> <a href="#!" class="back">Test link in front of page</a> <p> Do you mean something like this ? <br/> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </body> </html>
如何修改我的功能以默认隐藏消息的正文并在单击时显示正文？
[英]How can I modify my function to hide the body of the messages as default and to show the body when clicked?
加载页面时如何随机执行 JavaScript function ？
[英]How can I execute a JavaScript function at random when the page is loaded?
如何通过AJAX调用的成功回调替换页面的整个HTML或正文内容？
[英]How can I replace the entire HTML of a page, or its body content, via an AJAX call's success callback?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.