Javascript 页面加载时将光标更改为忙碌
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4053565/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change cursor to busy while page is loading
提问by kralco626
I understand how to use javascript to change the cursor to busy while the page is making and ajax call.
我了解如何在页面制作和 ajax 调用时使用 javascript 将光标更改为忙碌状态。
However I have a page that does not use ajax, it uses a postback to reload the page. However the load is rather data intensive and it takes a few seconds. During this time the user can still click on the page. I want to turn the cursor to "waiting" so the user does not try to click on the page.
但是我有一个不使用 ajax 的页面，它使用回发来重新加载页面。然而，加载是数据密集型的，需要几秒钟。在此期间，用户仍然可以点击页面。我想将光标转到“等待”，这样用户就不会尝试点击页面。
For example I have a couple of dropdowns that cause postback. I make a selection and the page loads for 3 seconds. While it loads I would like the cursor to turn to waiting so the user does not try to make a selection on a second dropdown until the page reloads.
例如，我有几个下拉菜单会导致回发。我做了一个选择，页面加载了 3 秒。当它加载时，我希望光标转向等待，以便用户在页面重新加载之前不会尝试在第二个下拉列表中进行选择。
Is this possible?
这可能吗？
Additional Info: (simplified version of my setup)
附加信息：（我的设置的简化版本）
I have a masterpage:
我有一个主页：
<form id="form1" runat="server">
<table width = "100%" bgcolor="White">
<tr><td>
<h3><asp:ContentPlaceHolder id="MAIN" runat="server"></asp:ContentPlaceHolder></h3>
</tr></td>
</table>
</form>
<script type="text/javascript">
function cursorwait(e) {
document.body.style.cursor = 'wait';
}
var fm = document.getElementById('<% =form1.ClientID %>');
if (fm.addEventListener) {
fm.addEventListener('submit', cursorwait, false);
}
else {
fm.attachEvent('onsubmit', cursorwait);
}
</script>
and then a page that uses the master page:
然后是一个使用母版页的页面：
<asp:Content ID="Content1" ContentPlaceHolderID="MAIN" Runat="Server">
<table runat=server id="tb_simple_search_table" cellpadding = 0 cellspacing = 0>
<tr><td>
<asp:DropDownList...
<asp:DropDownList...
</td></tr>
</table>
</asp:content>
采纳答案by lincolnk
you can add a handler to the form's submitevent.
您可以向表单的submit事件添加处理程序。
CSS
CSS
.wait, .wait * { cursor: wait; }
JavaScript
JavaScript
function cursorwait(e) {
document.body.className = 'wait';
}
var fm = document.getElementById('<% =form1.ClientID %>');
var proxySubmit = fm.onsubmit;
fm.onsubmit = function () {
cursorwait();
if (proxySubmit) {
proxySubmit.call(fm);
}
}
here we're ensuring our method gets called if submit()is called in js like the drop down does when it causes a postback. this should also catch any other instances of the form submitting.
在这里，我们确保我们的方法submit()在 js 中被调用时被调用，就像下拉菜单在导致回发时所做的那样。这也应该捕获表单提交的任何其他实例。
回答by Andy Rose
I am not certain if this is the best or most efficient method but if you want to change the cursor to show the page is busy after the button click the following jQuery should do the trick:
我不确定这是否是最好的或最有效的方法，但是如果您想更改光标以在按钮单击后显示页面繁忙，则以下 jQuery 应该可以解决问题：
$(document).ready(function() {
$(".button").click(function() {
$("*").css("cursor", "wait");
});
});
回答by RBS_Gimmel
Just give each button a class, say "WaitOnClick", then just write it: $(".WaitOnClick").click(function() {
只需给每个按钮一个类，说“WaitOnClick”，然后就这样写： $(".WaitOnClick").click(function() {
