`
wangyihust
  • 浏览: 437275 次
文章分类
社区版块
存档分类
最新评论

预防"提交"按钮的多次点击-onbeforeunload事件

阅读更多


预防"提交"按钮的多次点击



Google,找到了一些代码,自己修改了一下。主要参考老猫'blog.


public void page_load(Object obj,EventArgs e) 

  btn.Attributes.Add("onclick","state=true;"); 
  StringBuilder sb=new StringBuilder(); 
  sb.Append("if (!state) return;"); 
  sb.Append("var button=document.getElementById('btn');"); 
  sb.Append("button.value=\" Please Wait... \";"); 
  sb.Append("document.body.style.cursor='wait';"); 
  sb.Append("button.disabled=true;"); 

 string strScript="<script>"; 
 strScript=strScript +"var state=false;"; 

 //将函数绑定到页面的onbeforeunload事件: 
 strScript=strScript +"window.attachEvent('onbeforeunload',function(){" +sb.ToString()+ "});"; 
 strScript=strScript +"</"+"script>"; 
 ClientScriptManager cs = Page.ClientScript;
 cs.RegisterStartupScript(this.GetType(), "onbeforeunload", strScript);


private void Submit_Click(Object sender, EventArgs e){ 
  //模拟长时间的按钮处理 
  System.Threading.Thread.Sleep(3000); 
  Response.Write("<script>alert(xxx!!');"+"</"+"script>"); 




<asp:button id="btn" Text="Submit" OnClick="Submit_Click" runat="server"/>


修改好的这个例子原理是提交后将按钮置于一定时间的无效状态. 
仅能防止一些,因网速慢而心急的用户造成的误点击. 
对于恶意的多次刷新而形成的多次提交还是没有办法解决. 
(不过应该可通过页面的onbeforeunload事件解决) 

如何在用户关掉web浏览器窗口前, 进行相应的动作

参考 maison 'blog


长期以来, 做Web项目, 总会头疼这个问题.
用户不进行注销或者退出功能, 直接关闭了浏览器.
或者用户在进行输入操作时, 误点了一个链接, 跳转到其它页面, 造成输入数据的丢失.

今天发现了onbeforeunload事件,它是这样用的:
<script language="javascript">
  g_blnCheckUnload = true;
  function RunOnBeforeUnload() {
     if (g_blnCheckUnload)
   {//注意异常的捕获
     try{
       window.event.returnValue = 'You will lose any unsaved content';  
            }catch(e){}
      } 

  }
</script>
<body  onbeforeunload="RunOnBeforeUnload()">
</body>
这样每次关闭浏览器窗口或涮新页面时,都要触发onbeforeunload这个事件,这样可以对用户进行提示,避免不必要的遗憾。

我上网又查了一些这个事件的用法,感觉还是http://www.surfchen.org/?p=54这篇写得最清楚了,摘抄如下:

onbeforeunload事件: 
注:三大主流浏览器中firefox和IE都支持onbeforeunload事件,opera尚未支持。

用法:

object.onbeforeunload = handler <element onbeforeunload = “handler” … ></element> 描述:
事件触发的时候弹出一个有确定和取消的对话框,确定则离开页面,取消则继续待在本页。
handler可以设一个返回值作为该对话框的显示文本。

 

触发于:

  • 关闭浏览器窗口
  • 通过地址栏或收藏夹前往其他页面的时候
  • 点击返回,前进,刷新,主页其中一个的时候
  • 点击 一个前往其他页面的url连接的时候
  • 调用以下任意一个事件的时候:click,document write,document open,document close,window close ,window navigate ,window NavigateAndFind,location replace,location reload,form submit.
  • 当用window open打开一个页面,并把本页的window的名字传给要打开的页面的时候。
  • 重新赋予location.href的值的时候。
  • 通过input type=”submit”按钮提交一个具有指定action的表单的时候。

可以用在以下元素:
BODY, FRAMESET, window



分享到:
评论

相关推荐

    离开网页onbeforeunload事件在火狐的兼容并且提交不触发

    此外,对于表单提交,如果用户通过点击提交按钮离开页面,onbeforeunload事件默认情况下不会触发,因为浏览器认为这是用户有意的行为。 在描述中提到的博文链接可能详细讨论了如何在火狐中实现onbeforeunload事件的...

    liukexina#weekly#2021-15周-onbeforeunload使用踩坑1

    引言项目开发需要关闭标签页时,弹窗提示用户【数据将不被保存,是否继续操作】实现该功能,则需要监听浏览器是否关闭下面来学习涉及到浏览器关闭的两个方法onbefor

    ember-onbeforeunload:在路线或关闭窗口之间转换时调用逻辑

    ember install ember-onbeforeunload用法首先,将ConfirmationMixin混合到您的Ember.Route 。 默认情况下,路由model hasDirtyAttributes ( )会在每次卸载前提示用户。 // app/routes/foo.jsimport Ember from '...

    JS监听关闭浏览器事件之Onunload与Onbeforeunload

    本文将深入探讨两个关键的JavaScript事件:“onunload”和“onbeforeunload”,以及它们在实际应用中的差异和使用方法。 ### 一、`onbeforeunload`事件 `onbeforeunload`事件在页面即将卸载时触发,即当用户尝试...

    防止在服务器处理完成之前用户多次点击提交按钮处理代码

    在开发Web应用时,尤其是涉及用户提交数据的场景,如何防止用户在服务器处理请求期间多次点击提交按钮,是一个常见的问题。这可能导致数据的重复插入或更新,从而引发一系列潜在的问题。以下是一些防止用户多次点击...

    关闭浏览器时提示onbeforeunload事件

    `onbeforeunload`事件是JavaScript中的一个非常重要的事件,它允许开发者在用户尝试离开当前页面时执行特定的操作,比如确认用户是否真的想要离开,或者在离开前保存未完成的数据。这个事件在用户关闭浏览器窗口、...

    onbeforeunload与onunload事件异同点总结

    - 当用户关闭浏览器窗口、导航到其他页面、刷新页面、点击链接或执行可能导致页面离开的动作(如表单提交)时,这两个事件会被触发。 - 还包括各种编程操作,如改变 `location.href`、调用 `window.open` 等。 **3)...

    js事件模型

    在JavaScript中,事件是用户或浏览器对网页进行某种操作时触发的特定行为,例如点击按钮、滚动页面等。理解并掌握事件模型对于创建交互式Web应用至关重要。 首先,我们来看一下常见的JavaScript事件类型: 1. 鼠标...

    js事件详解-0-1-2级模型.pdf

    此外,还介绍了一个`addEvent`函数,这是一个用于添加事件监听器的函数,它考虑了对同一个事件类型的多个监听器的管理。 4. 事件对象:在处理事件时,会有一个事件对象传递给事件处理函数,通过这个事件对象可以...

    捕捉IE关闭按钮事件

    1. **`onbeforeunload`事件**:当浏览器窗口准备关闭时,如用户点击关闭按钮或导航到另一个页面,浏览器会触发`onbeforeunload`事件。开发者可以为这个事件注册一个回调函数,该函数将在页面卸载之前运行。在IE中,...

    J2EE框架-重复提交、重复刷新、防止后退的问题以及处理方式

    当用户在网页上点击提交按钮,由于网络延迟或其他原因,用户可能会误以为操作未执行,从而多次点击提交,导致系统接收到多个相同的请求,造成重复记录。这种情况下,如果系统无法识别并处理这些重复请求,可能会...

    javascript的事件大全

    - onClick:当用户点击鼠标时触发,常用于按钮、链接等交互元素。 - onDblClick:鼠标双击时触发,常用于快速打开链接或执行特殊操作。 - onMouseDown:鼠标按钮被按下时触发,可用于拖放操作的开始。 - ...

    js触发事件大全

    事件是用户或浏览器对页面进行操作时触发的特定情况,例如点击按钮、滚动页面等。本文将详细讲解JavaScript中的各种触发事件。 1. 鼠标事件: - onclick:当鼠标单击元素时触发。 - ondblclick:鼠标双击元素时...

    js鼠标事件大全(事件说明)

    - **示例用途**:常用于按钮点击响应、链接跳转等场景。 #### 2. onDblClick - 双击事件 - **说明**:当用户在一个元素上双击鼠标左键时触发。 - **兼容性**:IE4|N4|O4 - **示例用途**:用于打开文件、编辑文本等...

    js鼠标事件大全js鼠标事件大全

    数据绑定事件(通常是服务器端技术如ASP.NET)不在此处详细讨论,因为它们更多涉及到服务器与客户端的数据交换,而不是纯JavaScript鼠标事件。 理解并熟练运用这些JavaScript鼠标事件,可以帮助开发者创建更加动态...

    javascript Onunload与Onbeforeunload使用小结.docx

    **定义**:`onunload`事件在文档被卸载之前触发,通常发生在用户离开当前页面时(包括关闭浏览器、点击后退按钮或导航到另一个页面等情况)。值得注意的是,`onunload`事件是在所有其他资源(如图像、子框架等)都...

    浅谈javascript中onbeforeunload与onunload事件

    百度之,有onbeforeunload与onunload这两个事件,但是onbeforeunload在用户刷新的时候也会执行。搞得我弄的挺久的,所以想在这里做一个小小的总结 onbeforeunload与onunload事件 onbeforeunload定义和用法 ...

    判断用户的在线状态 onbeforeunload事件

    获得用户登陆状态不用说了,判断离开的话就有一点问题了,如果说用户都是按照设计者的规定触发退出事件离开的话那就没什么难度了,但是用户的离开方式多种多样,怎么在用户非法离开的时候即时的判断离开呢?...

Global site tag (gtag.js) - Google Analytics