快捷導(dǎo)航

通過(guò)JS解決頁(yè)面刷新導(dǎo)致按鈕OnClientClick事件消失問(wèn)題

更新時(shí)間：2024年12月11日 17:12:52 作者：初九之潛龍勿用

這篇文章主要介紹了如何通過(guò)JS解決頁(yè)面刷新導(dǎo)致按鈕OnClientClick事件消失問(wèn)題,OnClientClick 提供客戶端JS執(zhí)行能力,并以 return false 或 return true 來(lái)決定是否繼續(xù)執(zhí)行 OnClick 事件,需要的朋友可以參考下

故障現(xiàn)象

System.Web.UI.WebControls.Button 提供了 OnClientClick 和 OnClick 事件屬性。OnClientClick 提供客戶端JS執(zhí)行能力，并以 return false 或 return true 來(lái)決定是否繼續(xù)執(zhí)行 OnClick 事件，OnClick 事件執(zhí)行服務(wù)器方法，執(zhí)行 OnClick 事件會(huì)刷新 Web 頁(yè)面。

比如如下代碼：

<asp:Button id="sendButton" OnClientClick="return sendReady();" 
runat="server" class="btn btn-white" 
  Text="發(fā)送短信驗(yàn)證碼" onclick="sendButton_Click" />

OnClientClick 事件執(zhí)行 sendReady() JS函數(shù)，如果函數(shù) return true; 則執(zhí)行 onclick 事件中 sendButton_Click 服務(wù)器方法。

另外如果點(diǎn)擊此按鈕將其置為不可用狀態(tài)（this.disabled = true;）, 再去調(diào)用其它服務(wù)器按鈕事件，如下圖：

圖中的發(fā)送按鈕點(diǎn)擊成功后，暫時(shí)按鈕不可用。此時(shí)去操作其它服務(wù)器按鈕，如上傳圖片。則可能會(huì)出現(xiàn)不可用按鈕恢復(fù)可用狀態(tài)時(shí)，點(diǎn)擊后直接執(zhí)行了服務(wù)器方法，即 OnClientClick 事件屬性消失。

開(kāi)發(fā)運(yùn)行環(huán)境

操作系統(tǒng)： Windows Server 2019 DataCenter

.net版本： .netFramework4.7.2

開(kāi)發(fā)工具：VS2019 C#

解決

發(fā)現(xiàn)通過(guò)服務(wù)器事件捆綁，無(wú)效：

void Page_load(Object sender, EventArgs e)
{
     sendButton.OnClientClick = "return sendReady();";
}

客戶端事件捆綁，有效：

sendbtn.setAttribute("onclick","return sendReady();");

其它

本示例中如果將按鈕置為不可用狀態(tài)（disabled = true;），即使客戶端 JS 返回 return true ，也無(wú)法調(diào)用服務(wù)器方法，需要通過(guò) JS 引用，簡(jiǎn)單的引用方法，我們可以調(diào)用如下代碼：

__doPostBack(document.getElementById("sendButton").name, '');

__doPostBack方法由.net 生成并管理，可以調(diào)用服務(wù)器方法，請(qǐng)注意引用的是元素的 name 而不是 ID，引用此方法還需要在頁(yè)面頭部引用如下屬性：

<%@ Page Language="C#" AutoEventWireup="true" MaintainScrollPositionOnPostback="true" %>

當(dāng)然如果不添加此選項(xiàng)，我們還可以通過(guò)模擬調(diào)用隱藏服務(wù)器按鈕的方法。

到此這篇關(guān)于通過(guò)JS解決頁(yè)面刷新導(dǎo)致按鈕OnClientClick事件消失問(wèn)題的文章就介紹到這了,更多相關(guān)JS解決OnClientClick事件消失內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: