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 相关文章推荐
两个比较有用的Javascript工具函数代码
Feb 17 Javascript
JavaScript 语言的递归编程
May 18 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
JavaScript中window和document用法详解
Jul 28 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 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
一个捕获函数输出的函数
2007/02/14 PHP
php全排列递归算法代码
2012/10/09 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
javascript中对对层的控制
2006/12/29 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
python网络编程之读取网站根目录实例
2014/09/30 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
教师的实习自我鉴定
2013/12/17 职场文书
便利店的创业计划书
2014/01/15 职场文书
办公室文员工作职责
2014/01/31 职场文书
物业总经理岗位职责
2014/02/28 职场文书
教师党员自我评议不足范文
2014/10/19 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
2014年党小组工作总结
2014/12/20 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS