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 ajax cache缓存问题
Jul 01 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
js限制文本框只能输入数字方法小结
Jun 16 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 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 rand()造成CPU 100%的解决办法
2010/05/18 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
PHP 文件上传限制问题
2019/09/01 PHP
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
Python实现提取文章摘要的方法
2015/04/21 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
python 美化输出信息的实例
2018/10/15 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
【python】matplotlib动态显示详解
2019/04/11 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
Django 批量插入数据的实现方法
2020/01/12 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
个人授权委托书范文
2014/09/21 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
汽车转让协议书
2015/01/29 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang