按钮的 OnClientClick 和 Click 事件未触发 - FireFox 中的问题答案

【问题标题】：OnClientClick and Click event together for a button is not firing - issue in FireFox按钮的 OnClientClick 和 Click 事件未触发 - FireFox 中的问题
【发布时间】：2011-02-21 11:07:12
【问题描述】：

我在服务器端代码中的按钮上附加了 Onclientclick 事件，如下所示，

TopPanelButton.OnClientClick = string.Format("if(!ValidData({0},{1},{2},{3})) return false;", txtOD.ClientID, radCmbOD.ClientID, txtgetMe.ClientID, RadAjaxLoadingPanel1.ClientID);

此外，在 aspx 页面中为同一个按钮附加了 onClick 事件，

 <asp:Button ID="TopPanelButton" runat="server" Text="Go" 
   CssClass="CBtn1" Width="30px" Height="21px" OnClick="TopPanelButton_Click" />

如果 onclientclick 返回 true，则应该触发服务器端 click 事件。调用“ValidateData()”函数来验证表单中的条目。

此代码在 IE 中运行良好。但在 Firefox 中，这两个事件都不是 firig。如果我评论“TopPanelButton.OnClientClick =...”代码，则 onClick 事件正在触发。

我可以在下面的代码中在哪里应用此代码Page.ClientScript.GetPostBackEventReference()。

TopPanelButton.OnClientClick = string.Format("if(!ValidData({0},{1},{2},{3})) return false;", txtOD.ClientID, radCmbOD.ClientID, txtgetMe.ClientID, RadAjaxLoadingPanel1.ClientID);

Firefox 没有调用 ValidData 函数。我将警报放在 javascript 中，但 Firefox 中未显示警报消息。但 IE 显示警告消息。

我的validData函数：

function ValidData(txtOND, ddlOND, txtgetMe, aPanel) {
        alert("Entered");
        if (!ValidNumber(txtgetMe)) {
            aPanel.hide();
            return false;
        }

        if (ddlOND.value == "Origin" || ddlOND.value == "Destination") {
            if (!ValidOriginOrDestination(txtOND, ddlOND.value)) {
                aPanel.hide();
                return false;
            }
        }
        else if (ddlOND.value == "O&D") {
            if (!ValidOND(txtOND)) {
                aPanel.hide();
                return false;
            }
        }

        if (ddlOND.value == "Region Starting with" || ddlOND.value == "Country Starting with" || ddlOND.value == "Budget Station Starting with") {
            if (txtOND.value.length == 0) {
                radalert("Enter  a value for " + ddlOND.value);
                aPanel.hide();
                return;
            }
        }
        aPanel.show();
        return true;
    }

【问题讨论】：

在 ValidData() 中似乎有些不正确，IE 可能更宽容。您可以发布 ValidData() 的代码吗？
使用可以使用switch (ddlOND.value) { }代替多个if-elseif

标签： c# asp.net firefox code-behind onclientclick

【解决方案1】：

我发现了问题并修复了。下面给出了我的问题的解决方案。

我正在使用 Telerik 控制哪个 clientID 在 Firefox 中不被视为对象。但 IE 将 clientID 视为对象。所以我以前的代码在 IE 中运行良好，而不是在 Firefox 中。现在我更改了 OnClientClick，通过在单个 quoute 中将 clientID 作为字符串传递如下：

TopPanelButton.OnClientClick = string.Format("javascript:if(!ValidData('{0}','{1}','{2}','{3}')) return false;", txtOD.ClientID, radCmbOD.ClientID, txtgetMe.ClientID, RadAjaxLoadingPanel1.ClientID);

在我的 javascript 中，我使用 document.getElementById 来获取对象。

function ValidData(txtOND, ddlOND, txtgetMe, aPanel) {
        var l_aPanel = document.getElementById(aPanel);
        var l_txtgetMe = document.getElementById(txtgetMe);

        if (!ValidNumber(l_txtgetMe)) {
            return false;
        }

        var l_txtOND = document.getElementById(txtOND);
        var l_ddlOND = document.getElementById(ddlOND);

        if (l_ddlOND.value == "Origin" || l_ddlOND.value == "Destination") {
            if (!ValidOriginOrDestination(l_txtOND, l_ddlOND.value)) {
                return false;
            }
        }
        else if (l_ddlOND.value == "O&D") {
            if (!ValidOND(document.getElementById(txtOND))) {
                return false;
            }
        }

        if (l_ddlOND.value == "Region Starting with" || l_ddlOND.value == "Country Starting with" || l_ddlOND.value == "Budget Station Starting with") {
            if (l_txtOND.value.length == 0) {
                radalert("Enter  a value for " + l_ddlOND.value);
                return false;
            }
        }
        return true;
    }

这在 IE 和 Firefox 中都可以正常工作。

【讨论】：

【解决方案2】：

FireFox 不能同时处理 OnClientClick 和 OnClick 事件（尽管 Internet Explorer 处理得很好）。为了解决这个问题，可以使用一种方法 Page.ClientScript.GetPostBackEventReference() 来生成客户端 Javascript 以对控件进行回发。

所以下面的代码将隐藏页面上除了加载图形之外的所有内容，并且还会调用 btnSubmit 回发方法。它返回 false 的原因是 Internet Explorer 会调用服务器端的 OnClick 方法两次。

btnSubmit.OnClientClick = String.Format("ElementStyle(document.getElementById('wrapper'),'display','none'); {0}; return false;", Page.ClientScript.GetPostBackEventReference(btnSubmit, ""));

【讨论】：