在整个html页面上等待光标
在整个html页面上等待光标
提问于 2008-10-10 20:18:47
有没有可能以一种简单的方式在整个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)
稍后编辑...
来自多沃德的一个更简单的解决方案：
.wait, .wait * { cursor: wait !important; }然后
<a href="#" onclick="document.body.className = 'wait'; return false">Do something</a>此解决方案仅显示等待光标，但允许单击。
回答 13
Stack Overflow用户
发布于 2012-05-29 23:11:16
如果你使用这个略微修改过的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"); });
});Stack Overflow用户
发布于 2008-10-10 21:02:38
这似乎可以在firefox中工作
<style>
*{ cursor: inherit;}
body{ cursor: wait;}
</style>*部分确保当您将鼠标悬停在链接上时，光标不会改变。尽管链接仍然可以点击。
Stack Overflow用户
发布于 2012-07-31 00:05:51
今天我已经在这个问题上挣扎了几个小时。基本上，在FireFox中一切正常，但(当然)在IE中就不行了。在IE中，等待光标在执行耗时的函数后显示。
我终于在这个网站上找到了诀窍：http://www.codingforums.com/archive/index.php/t-37185.html
代码：
//...
document.body.style.cursor = 'wait';
setTimeout(this.SomeLongFunction, 1);
//setTimeout syntax when calling a function with parameters
//setTimeout(function() {MyClass.SomeLongFunction(someParam);}, 1);
//no () after function name this is a function ref not a function call
setTimeout(this.SetDefaultCursor, 1);
...
function SetDefaultCursor() {document.body.style.cursor = 'default';}
function SomeLongFunction(someParam) {...}我的代码在一个JavaScript类中运行，因此有了this和MyClass (MyClass是一个单例)。
在尝试显示本页面中描述的div时，我遇到了同样的问题。在IE中，它是在函数执行后显示的。所以我猜这个技巧也能解决这个问题。
非常感谢这篇文章的作者glenngv。你真的让我很开心！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/192900
复制相关文章
相似问题