JS在onclientclick里如何控制onclick的執(zhí)行
OnClientClick是客戶端腳本,一般使用JavaScript,在客戶端,也就是IE中運(yùn)行,點(diǎn)擊后馬上執(zhí)行
OnClick是服務(wù)器端事件處理函數(shù),使用C#或者vb.net,在服務(wù)器端,也就是IIS中運(yùn)行,點(diǎn)擊按鈕后,執(zhí)行postback,之后再運(yùn)行。
若想先調(diào)用了OnClientClick后就不在調(diào)用OnClick事件,應(yīng)在OnClientClick事件里返回false.若不返回false,在執(zhí)行了OnClientClick后,會(huì)繼續(xù)調(diào)用OnClick事件!
實(shí)現(xiàn)方法如下:
<asp:Button ID="btn_Save" runat="server" Text="保存" CssClass="button_bak" OnClientClick="return whetherEmpty();" OnClick="btn_Save_Click" />
//JavaScript實(shí)現(xiàn)如下:
<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();" 沒(méi)有return ,在JavaScript里即使return fales,onclick依然會(huì)執(zhí)行!
下面給大家介紹onclientclick和onclick區(qū)別
其實(shí)有的時(shí)候需要客戶端和服務(wù)端雙重校驗(yàn),為什么這么說(shuō)呢? 比果說(shuō),一個(gè)用戶名的文本框,在客戶端我們通過(guò)JS校驗(yàn),只能輸入字母和數(shù)字,不能有特殊字符!通常情況下是沒(méi)有問(wèn)題的,但是總有那么一丟丟人想方設(shè)法的去“搞破壞” ,這個(gè)時(shí)候就需要進(jìn)行雙重校驗(yàn)了!說(shuō)白了,就是服務(wù)端和客戶端都進(jìn)么校驗(yàn)!
比如說(shuō):Button有:OnClick事件和OnClientClick屬性,前者一般就是服務(wù)端的點(diǎn)擊事件!后者則是客戶端的點(diǎn)擊事件!
我們來(lái)做一個(gè)測(cè)試!在Default.aspx頁(yè)面中添加如下代碼!
<script language="javascript" type="text/javascript">
function buttonClick() {
alert("我是客戶端點(diǎn)擊事件");
return false;
}
</script>
頁(yè)面代碼:
<form id="form1" runat="server"> <div> <asp:Button ID="Button1" runat="server" Text="些Button是服務(wù)端控件,默認(rèn)使用OnClientClick事件,請(qǐng)禁用瀏覽器的Js功能體驗(yàn)" 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 = "我是服務(wù)端點(diǎn)擊事件";
}
大家運(yùn)行看看是什么效果? 你可能會(huì)發(fā)現(xiàn),只彈出了JS中的代碼! 沒(méi)錯(cuò),這正是我們想要的效果,通過(guò)return false 來(lái)"屏蔽"服務(wù)端的校驗(yàn)!好處是什么? 就是不用刷新頁(yè)面呀!
- 為radio類型的INPUT添加客戶端腳本(附加實(shí)現(xiàn)JS來(lái)禁用onClick事件思路代碼)
- javascript 動(dòng)態(tài)改變onclick事件觸發(fā)函數(shù)代碼
- js觸發(fā)asp.net的Button的Onclick事件應(yīng)用
- js給onclick事件賦值,動(dòng)態(tài)傳參數(shù)實(shí)例解說(shuō)
- javascript中onclick(this)用法介紹
- JavaScript獲取onclick、onchange等事件值的代碼
- js onclick事件傳參講解
- js給onclick賦值傳參數(shù)的兩種方法
- 原生JS操作網(wǎng)頁(yè)給p元素添加onclick事件及表格隔行變色
- js動(dòng)態(tài)添加onclick事件可傳參數(shù)與不傳參數(shù)
相關(guān)文章
js實(shí)現(xiàn)連個(gè)數(shù)字相加而不是拼接的方法
這篇文章主要介紹了js如何實(shí)現(xiàn)連個(gè)數(shù)字相加而不是拼接,需要的朋友可以參考下2014-02-02
微信小程序仿抖音視頻之整屏上下切換功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序仿抖音視頻之整屏上下切換功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例
這篇文章主要介紹了JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
使用JS來(lái)動(dòng)態(tài)操作css的幾種方法
這篇文章主要介紹了使用JS來(lái)動(dòng)態(tài)操作css的幾種方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
js實(shí)現(xiàn)隨機(jī)點(diǎn)名程序
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)隨機(jī)點(diǎn)名程序,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11

