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 相关文章推荐
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
JS中FileReader类实现文件上传及时预览功能
Mar 27 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 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压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
PHP类的反射用法实例
2014/11/03 PHP
php的4种常见运行方式
2015/03/20 PHP
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
javascript 动态创建表格
2015/01/08 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
Python 专题一 函数的基础知识
2017/03/16 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
python中dict()的高级用法实现
2019/11/13 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
python如何求100以内的素数
2020/05/27 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
Keras自定义IOU方式
2020/06/10 Python
Django Form常用功能及代码示例
2020/10/13 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
西班牙用户之间买卖视频游戏的平台:Wakkap
2020/03/21 全球购物
事业单位请假制度
2014/01/13 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL