脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS解决OnClientClick事件消失

通过JS解决页面刷新导致按钮OnClientClick事件消失问题

 更新时间：2024年12月11日 17:12:52   作者：初九之潜龙勿用  
这篇文章主要介绍了如何通过JS解决页面刷新导致按钮OnClientClick事件消失问题,OnClientClick 提供客户端JS执行能力,并以 return false 或 return true 来决定是否继续执行 OnClick 事件,需要的朋友可以参考下

故障现象

System.Web.UI.WebControls.Button 提供了 OnClientClick  和 OnClick 事件属性。OnClientClick 提供客户端JS执行能力，并以 return false 或 return true 来决定是否继续执行 OnClick 事件，OnClick 事件执行服务器方法，执行 OnClick 事件会刷新 Web 页面。

比如如下代码：

<asp:Button id="sendButton" OnClientClick="return sendReady();" 
runat="server" class="btn btn-white" 
  Text="发送短信验证码" onclick="sendButton_Click" />

OnClientClick 事件执行 sendReady() JS函数，如果函数 return true; 则执行 onclick 事件中 sendButton_Click 服务器方法。

另外如果点击此按钮将其置为不可用状态（this.disabled = true;）,  再去调用其它服务器按钮事件，如下图：

图中的发送按钮点击成功后，暂时按钮不可用。此时去操作其它服务器按钮，如上传图片。则可能会出现不可用按钮恢复可用状态时，点击后直接执行了服务器方法，即 OnClientClick 事件属性消失。

开发运行环境

操作系统： Windows Server 2019 DataCenter

.net版本： .netFramework4.7.2 

开发工具：VS2019  C#

解决

发现通过服务器事件捆绑，无效：

void Page_load(Object sender, EventArgs e)
{
     sendButton.OnClientClick = "return sendReady();";
}

客户端事件捆绑，有效：

sendbtn.setAttribute("onclick","return sendReady();");

其它

本示例中如果将按钮置为不可用状态（disabled = true;），即使客户端 JS 返回 return true ，也无法调用服务器方法，需要通过 JS 引用，简单的引用方法，我们可以调用如下代码：

__doPostBack(document.getElementById("sendButton").name, '');

 __doPostBack方法由.net 生成并管理，可以调用服务器方法，请注意引用的是元素的 name 而不是 ID，引用此方法还需要在页面头部引用如下属性：

<%@ Page Language="C#" AutoEventWireup="true" MaintainScrollPositionOnPostback="true" %>

当然如果不添加此选项，我们还可以通过模拟调用隐藏服务器按钮的方法。

到此这篇关于通过JS解决页面刷新导致按钮OnClientClick事件消失问题的文章就介绍到这了,更多相关JS解决OnClientClick事件消失内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • HBuilderX开发一个简单的微信小程序的实现步骤

    HBuilderX开发一个简单的微信小程序的实现步骤

    本文主要介绍了HBuilderX开发一个简单的微信小程序的实现步骤，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-02-02
  • js常用函数push()、pop()、shift()、unshift()、slice()和splice()等详解

    js常用函数push()、pop()、shift()、unshift()、slice()和splice()等详解

    这篇文章主要给大家介绍了关于js常用函数push()、pop()、shift()、unshift()、slice()和splice()等的相关资料,js中数组操作函数还是非常多的,今天忽然想到来总结一下,也算是温故而知新吧,需要的朋友可以参考下
    2023-11-11
  • Javascript 异步加载详解(浏览器在javascript的加载方式)

    Javascript 异步加载详解(浏览器在javascript的加载方式)

    本文总结一下浏览器在 javascript 的加载方式,需要的朋友可以参考下
    2012-05-05
  • JavaScript中Promise的使用详解

    JavaScript中Promise的使用详解

    Promise，相信每一个前端工程师都或多或少地在项目中都是用过，毕竟它早已不是一个新名词。ES6中已经原生对它加以支持，在caniuse中搜索一下 Promise ，发现新版的chrome和firefox也已经支持。但是低版本的浏览器我们可以使用 es6-promise 这个 polyfill 库来加以兼容。
    2017-02-02
  • ECharts调用接口获取后端数据的四种方法总结

    ECharts调用接口获取后端数据的四种方法总结

    echarts是我们经常用到的数据可视化图形,但是后端反馈给我们的数据经常是数组包对象的集合类型,下面这篇文章主要给大家介绍了关于ECharts调用接口获取后端数据的四种方法,需要的朋友可以参考下
    2022-11-11
  • js设计模式之代理模式及订阅发布模式实例详解

    js设计模式之代理模式及订阅发布模式实例详解

    这篇文章主要介绍了js设计模式之代理模式及订阅发布模式,结合实例形式详细分析了代理模式及订阅发布模式的概念、原理、实现方法及相关操作注意事项,需要的朋友可以参考下
    2019-08-08
  • div模拟滚动条效果示例代码

    div模拟滚动条效果示例代码

    滚动条想必大家都见过吧，在本文将使用div来模拟滚动条的效果，具体实现如下，感兴趣的朋友可以参考下
    2013-10-10
  • JavaScript数组合并的8种常见方法小结

    JavaScript数组合并的8种常见方法小结

    项目过程中经常会遇到 JS 数组合并的情况,时常为这个纠结,这里整理一下,下面这篇文章主要给大家介绍了关于JavaScript数组合并的8种常见方法,需要的朋友可以参考下
    2022-11-11
  • 基于原生JS实现图片裁剪

    基于原生JS实现图片裁剪

    要进行图片编辑，最重要要能够对图片进行裁剪。主要的实现分成两部分，一部分是前端利用js进行裁剪区域选择，第二部分是利用PHP进行后台处理。现在就跟大家分享一下。
    2016-08-08
  • javascript获取checkbox复选框获取选中的选项

    javascript获取checkbox复选框获取选中的选项

    这篇文章主要介绍了javascript获取checkbox复选框获取选中的选项的方法,需要的朋友可以参考下
    2014-08-08

最新评论