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 相关文章推荐
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
JavaScript中DOM详解
Apr 13 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
详解Angular操作cookies方法
Jun 01 Javascript
JavaScript实现轮播图特效
Apr 10 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的面试题集
2006/11/19 PHP
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
一个基于PDO的数据库操作类
2011/03/24 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
jQuery 三击事件实现代码
2013/09/11 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
Python制作词云图代码实例
2019/09/09 Python
python 求10个数的平均数实例
2019/12/16 Python
如何通过python实现人脸识别验证
2020/01/17 Python
python openssl模块安装及用法
2020/12/06 Python
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
导游实习生自荐书
2014/01/28 职场文书
清明节扫墓活动方案
2014/03/02 职场文书
网络营销策划方案
2014/06/04 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL