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 相关文章推荐
jquery实现输入框动态增减的实例代码
Jul 14 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
浅析Vue 防抖与节流的使用
Nov 14 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
用libTemplate实现静态网页的生成
2006/10/09 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python学习笔记_数据排序方法
2014/05/22 Python
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
python 求定积分和不定积分示例
2019/11/20 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
"火柴棍式"程序员面试题
2014/03/16 面试题
2014年药店店长工作总结
2014/11/17 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL