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的滚动条滚动固定div(附演示下载)
Oct 29 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
May 03 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 Javascript
vue 清空input标签 中file的值操作
Jul 21 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数组函数
2008/08/18 PHP
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
php is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
jquery的ajax请求全面了解
2013/03/20 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
python动态加载变量示例分享
2014/02/17 Python
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
python中偏函数partial用法实例分析
2015/07/08 Python
快速入手Python字符编码
2016/08/03 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
护士实习自我鉴定
2013/10/22 职场文书
高中毕业自我鉴定
2013/12/22 职场文书
幼儿园教师教学反思
2014/02/06 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
提拔干部考察材料
2014/05/26 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL