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 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
判断是否存在子节点的实现代码
May 18 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
ligerUI---ListBox(列表框可移动的实例)
Nov 28 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 Javascript
如何手写一个简易的 Vuex
Oct 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实现mysql封装类示例
2014/05/07 PHP
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
在Python中增加和插入元素的示例
2018/11/01 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
Python collections.defaultdict模块用法详解
2020/06/18 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
公务员的自我鉴定
2013/10/26 职场文书
企业指导教师评语
2014/04/28 职场文书
入党综合考察材料
2014/06/02 职场文书
2015年消防工作总结
2015/04/24 职场文书
运动会100米加油稿
2015/07/21 职场文书
公司规章制度范本
2015/08/03 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
Python实现单例模式的5种方法
2021/06/15 Python
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电