是否可以通过简单的方式在整个html页面上将光标设置为“等待”？这个想法是在 ajax 调用完成时向用户展示正在发生的事情。下面的代码显示了我尝试过的简化版本，也展示了我遇到的问题:
- 如果元素 (#id1) 设置了游标样式，它将忽略 body 上设置的样式(显然)
- 一些元素具有默认的光标样式 (a)，悬停时不会显示等待光标
- body 元素根据内容有一定的高度，如果页面较短，则光标不会显示在页脚下方
测试:
<html>
<head>
<style type="text/css">
#id1 {
background-color: #06f;
cursor: pointer;
}
#id2 {
background-color: #f60;
}
</style>
</head>
<body>
<div id="id1">cursor: pointer</div>
<div id="id2">no cursor</div>
<a href="#" onclick="document.body.style.cursor = 'wait'; return false">Do something</a>
</body>
</html>
稍后编辑...
它适用于 firefox 和 IE:
div#mask { display: none; cursor: wait; z-index: 9999;
position: absolute; top: 0; left: 0; height: 100%;
width: 100%; background-color: #fff; opacity: 0; filter: alpha(opacity = 0);}
<a href="#" onclick="document.getElementById('mask').style.display = 'block'; return false">
Do something</a>
这个解决方案的问题(或特征)是它会因为重叠的 div 而阻止点击(感谢 Kibbee)
稍后再编辑...
来自 Dorward 的更简单的解决方案:
.wait, .wait * { cursor: wait !important; }
然后
<a href="#" onclick="document.body.className = 'wait'; return false">Do something</a>
此解决方案仅显示等待光标但允许点击。
最佳答案
如果您使用从 Dorward 发布的 CSS 的这个稍微修改过的版本，
html.wait, html.wait * { cursor: wait !important; }
然后您可以添加一些非常简单的 jQuery适用于所有 ajax 调用:
$(document).ready(function () {
$(document).ajaxStart(function () { $("html").addClass("wait"); });
$(document).ajaxStop(function () { $("html").removeClass("wait"); });
});
或者，对于旧的 jQuery 版本(1.9 之前):
$(document).ready(function () {
$("html").ajaxStart(function () { $(this).addClass("wait"); });
$("html").ajaxStop(function () { $(this).removeClass("wait"); });
});
关于javascript - 在整个 html 页面上等待光标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/192900/