JS在onclientclick里如何控制onclick的执行


Posted in Javascript onMay 30, 2016

OnClientClick是客户端脚本,一般使用JavaScript,在客户端,也就是IE中运行,点击后马上执行

OnClick是服务器端事件处理函数,使用C#或者vb.net,在服务器端,也就是IIS中运行,点击按钮后,执行postback,之后再运行。

若想先调用了OnClientClick后就不在调用OnClick事件,应在OnClientClick事件里返回false.若不返回false,在执行了OnClientClick后,会继续调用OnClick事件!

实现方法如下:

<asp:Button ID="btn_Save" runat="server" Text="保存" CssClass="button_bak" OnClientClick="return whetherEmpty();" OnClick="btn_Save_Click" />
//JavaScript实现如下:
<script language="javascript" type="text/javascript">
function whetherEmpty()
{
//alert("KPI信息不能全为空!");
emptflag = false ;
var kpiName = document.getElementById("<%=txt_KPIName.ClientID%>").value;
var jobgoal = document.getElementById("<%=txt_JobGoal.ClientID%>").value;
var weight = document.getElementById("<%=txt_Weight.ClientID%>").value;
var standard = document.getElementById("<%=txt_Standard.ClientID%>").value;
if (kpiName == "" && jobgoal == "" && weight =="" && standard =="")
{
emptflag = true ;
}
if (emptflag)
{
alert("KPI信息不能全为空!");
return false;
}
}
</script>

若是OnClientClick="return whetherEmpty();" 没有return ,在JavaScript里即使return fales,onclick依然会执行!

下面给大家介绍onclientclick和onclick区别

其实有的时候需要客户端和服务端双重校验,为什么这么说呢? 比果说,一个用户名的文本框,在客户端我们通过JS校验,只能输入字母和数字,不能有特殊字符!通常情况下是没有问题的,但是总有那么一丢丢人想方设法的去“搞破坏” ,这个时候就需要进行双重校验了!说白了,就是服务端和客户端都进么校验!

比如说:Button有:OnClick事件和OnClientClick属性,前者一般就是服务端的点击事件!后者则是客户端的点击事件!

我们来做一个测试!在Default.aspx页面中添加如下代码!

<script language="javascript" type="text/javascript">
function buttonClick() {
alert("我是客户端点击事件");
return false; 
}
</script>

页面代码:

<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="些Button是服务端控件,默认使用OnClientClick事件,请禁用浏览器的Js功能体验"
OnClick="Button1_Click" OnClientClick="return buttonClick();" />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</div>
</form>

cs文件代码:

protected void Button1_Click(object sender, EventArgs e)
{
this.Label1.Text = "我是服务端点击事件";
}

大家运行看看是什么效果? 你可能会发现,只弹出了JS中的代码! 没错,这正是我们想要的效果,通过return false 来"屏蔽"服务端的校验!好处是什么? 就是不用刷新页面呀!

Javascript 相关文章推荐
轻量级 JS ToolTip提示效果
Jul 20 Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
100个不能错过的实用JS自定义函数
Mar 05 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 #Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 #Javascript
js获取所有checkbox的值的简单实例
May 30 #Javascript
一览画面点击复选框后获取多个id值的方法
May 30 #Javascript
js判断复选框是否选中及选中个数的实现代码
May 30 #Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 #Javascript
限制复选框最多选择项的实现代码
May 30 #Javascript
You might like
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
探讨方法的重写(覆载)详解
2013/06/08 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
javascript History对象原理解析
2020/02/17 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
常用python数据类型转换函数总结
2014/03/11 Python
Python3读取zip文件信息的方法
2015/05/22 Python
numpy基础教程之np.linalg
2019/02/12 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
python变量的存储原理详解
2019/07/10 Python
django的model操作汇整详解
2019/07/26 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
小学运动会表扬稿
2014/01/19 职场文书
大学生个人自荐信
2014/02/24 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
python状态机transitions库详解
2021/06/02 Python
Python绘制散乱的点构成的图的方法
2022/04/21 Python