gpt4 book ai didi

Javascript:如何暂时禁用页面上的所有操作?

转载 作者:数据小太阳 更新时间:2023-10-29 04:07:36 26 4
gpt4 key购买 nike

在包含 Ajax 事件的页面上,我想禁用所有操作,直到 Ajax 调用返回(以防止出现双重提交等问题)

我通过在“锁定”页面时将 return false; 添加到当前的 onclick 事件,并稍后在“解锁”页面时删除它来尝试此操作。但是,这些操作在“解锁”后不再处于事件状态——您只是无法触发它们。

为什么这不起作用?请参阅下面的示例页面。还有其他想法可以实现我的目标吗?

示例代码:
链接和按钮都显示 JS 警报;当按下锁定时,然后解锁事件处理程序与之前相同,但不起作用...?!?
该代码最终旨在与特立尼达一起工作,但也应该在外部工作。

<html><head><title>Test</title>

<script type="text/javascript">
function lockPage()
{
document.body.style.cursor = 'wait';
lockElements(document.getElementsByTagName("a"));
lockElements(document.getElementsByTagName("input"));

if (typeof TrPage != "undefined")
{
TrPage.getInstance().getRequestQueue().addStateChangeListener(unlockPage);
}
}

function lockElements(el)
{
for (var i=0; i<el.length; i++)
{
el[i].style.cursor = 'wait';
if (el[i].onclick)
{
var newEvent = 'return false;' + el[i].onclick;
alert(el[i].onclick + "\n\nlock -->\n\n" + newEvent);
el[i].onclick = newEvent;
}
}
}

function unlockPage(state)
{
if (typeof TrRequestQueue == "undefined" || state == TrRequestQueue.STATE_READY)
{
//alert("unlocking for state: " + state);
document.body.style.cursor = 'auto';
unlockElements(document.getElementsByTagName("a"));
unlockElements(document.getElementsByTagName("input"));
}
}

function unlockElements(el)
{
for (var i=0; i<el.length; i++)
{
el[i].style.cursor = 'auto';
if (el[i].onclick && el[i].onclick.search(/^return false;/)==0)
{
var newEvent = el[i].onclick.substring(13);
alert(el[i].onclick + "\n\nunlock -->\n\n" + newEvent);
el[i].onclick = newEvent;
}
}
}
</script>

<style type="text/css">
</style>
</head>

<body>

<h1>Page lock/unlock test</h1>

<p>Use these actions to lock or unlock active elements on the page:
<a href="javascript:lockPage()">lock</a>,
<a href="javascript:unlockPage()">unlock</a>.</p>

<p>And now some elements:</p>

<a onclick="alert('This is the action!');return false;" href="#">link action</a> &nbsp;
<input type="button" value="button action" onclick="alert('This is another action!')"/>
</body>
</html>

感谢大家的想法和回答。

现在我看到我混淆了字符串和函数,这显然是行不通的;(

我应该明确指出我们使用了一些创建事件处理(和 Ajax)代码的 Web FW 和标签库 (Trinidad),因此我不能直接编辑它或使用同步 Ajax 等。

此外,Ajax 只是应该执行此代码的一种场景。它的目的是防止用户重复提交页面/操作,这也与非 Ajax 页面相关,您可以在其中双击按钮。我知道这并不是真的安全,这只是为了避免过于频繁地获取导航错误页面的“方便”之举(当然,我们有服务器端保护)。

所以,可能会尝试 div 覆盖。

再次感谢,
克里斯托夫。

最佳答案

如何设置一个全局变量

actions_disabled = 0

AJAX 调用开始时递增,结束时递减。然后,您所有的“ Action ”处理程序都可以从

开始
if (actions_disabled) return false;

比调试自修改代码简单多了!

或者,要锁定您的控件,您可以设置:

control.disabled="disabled"

这将使它们变灰,让用户清楚地知道他们无法提交。要解锁,只需设置:

control.disabled=""

基于评论的新想法(无法在评论中引用代码,看起来......):

您总是可以将额外的属性卡在 Javascript 对象之外:

要锁定,您可以:

control.onclick_old = control.onclick
control.onclick = "return false;"

要解锁,您可以:

control.onclick = control.onclick_old

关于Javascript:如何暂时禁用页面上的所有操作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/767385/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com