JS在onclientclick里如何控制onclick的执行

 更新时间:2016年05月30日 10:16:34   作者:sire168  
这篇文章主要介绍了JS在onclientclick里如何控制onclick的执行的相关资料,需要的朋友可以参考下

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实现HTML5 Canvas六种特效滤镜示例

    纯JavaScript实现HTML5 Canvas六种特效滤镜示例

    实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯JavaScript可调用的API文件gloomyfishfilter.js,程序源代码如下,感兴趣的朋友可以参考下哈
    2013-06-06
  • js实现微信分享代码

    js实现微信分享代码

    这篇文章主要介绍了js实现微信分享朋友链接显示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 前端项目中报错Uncaught (in promise)的解决方法

    前端项目中报错Uncaught (in promise)的解决方法

    最近在做项目的时候控制台报了一个错Uncaught(in promise) false,这篇文章主要给大家介绍了关于前端项目中报错Uncaught (in promise)的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • uniapp实现单选框的示例代码

    uniapp实现单选框的示例代码

    本文给大家介绍uniapp实现单选框的示例代码,采用uniapp-vue3实现的一款单选框组件,提供丝滑的动画选中效果,支持不同主题配置,适配web、H5、微信小程序,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • IE浏览器打印的页眉页脚设置解决方法

    IE浏览器打印的页眉页脚设置解决方法

    IE浏览器打印的页眉页脚设置解决方法
    2009-12-12
  • JavaScript遍历Json串浏览器输出的结果不统一问题

    JavaScript遍历Json串浏览器输出的结果不统一问题

    json串属于javascript的一个对象,有键和值对应的对象。这篇文章主要介绍了JavaScript遍历Json串浏览器输出的结果不统一问题的相关资料,需要的朋友可以参考下
    2016-11-11
  • JavaScript canvas实现七彩时钟效果

    JavaScript canvas实现七彩时钟效果

    这篇文章主要为大家详细介绍了JavaScript canvas实现七彩时钟效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • 超详细小程序定位地图模块全系列开发教学

    超详细小程序定位地图模块全系列开发教学

    这篇文章主要介绍了超详细小程序定位地图模块全系列开发教学,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • JavaScript枚举选择jquery插件代码实例

    JavaScript枚举选择jquery插件代码实例

    这篇文章主要介绍了JavaScript枚举选择jquery插件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • JavaScript数组去重的几种方法效率测试

    JavaScript数组去重的几种方法效率测试

    JavaScript数组去重是前端面试酷爱的问题,问题简单而又能看出程序员对计算机程序执行过程的理解如何。数组去重的方法有很多,到底哪种是最理想的我不清楚。于是我测试了下数组去重的效率。测试二十万个数据,随着数据越多效率很明显的就体验了出来。下面来一起看看吧。
    2016-10-10

最新评论