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 相关文章推荐
MooTools 1.2介绍
Sep 14 Javascript
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
js 计数排序的实现示例(升级版)
Jan 12 Javascript
javascript 数组(list)添加/删除的实现
Dec 17 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使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
Python contextlib模块使用示例
2015/02/18 Python
python 性能提升的几种方法
2016/07/15 Python
python append、extend与insert的区别
2016/10/13 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
python实现简易动态时钟
2018/11/19 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
python pygame实现滚动横版射击游戏城市之战
2019/11/25 Python
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
财务分析个人的自荐书范文
2013/11/24 职场文书
保护环境的建议书
2014/03/12 职场文书
实习生评语
2014/04/26 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
医药销售自荐书
2014/05/29 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
质检员岗位职责范本
2015/04/07 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
聘任书的格式及模板
2019/10/28 职场文书