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 iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
jquery.validate使用详解
Jun 02 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
ionic2中使用自动生成器的方法
Mar 04 Javascript
Vue 使用中的小技巧
Apr 26 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 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中使用Oracle数据库(1)
2006/10/09 PHP
php连接mssql数据库的几种方法
2013/02/21 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
详解React 条件渲染
2020/07/08 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
王纯业的Python学习笔记 下载
2007/02/10 Python
Python 加密的实例详解
2017/10/09 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
python3 拼接字符串的7种方法
2018/09/12 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
自我推荐书
2013/12/04 职场文书
联欢晚会主持词
2014/03/25 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
赞美教师的句子
2019/09/02 职场文书
Python数据处理的三个实用技巧分享
2022/04/01 Python