Question

我正在尝试使ASP：Button不会回发并刷新页面。

我将OnClientClick设置为返回false作为函数的结果。

HTML-

                        <asp:Button ID="englishButton" runat="server" Text="English" OnClientClick="return englishClick();" />

JS-

function englishClick() {
            russianButton.style.backgroundColor = "WhiteSmoke";
            englishButton.style.backgroundColor = "teal";
            hebrewButton.style.backgroundColor = "WhiteSmoke";
            englishTable.style.visibility = "visible";
            hebrewTable.style.visibility = "hidden";
            russianTable.style.visibility = "hidden";
            return false;
        }

发生样式更改，但是页面立即刷新，样式返回到其原始状态。

Answer 1

如果您不希望它与服务器交互，为什么不只使用普通的HTML按钮呢？这里不需要ASP控件。

我也总是建议使用addEventListener来使用不引人注目的事件处理程序，因为它比在HTML中使用内联事件属性更具可读性和可维护性。

HTML：

<button type="button" id="englishButton">English</button>

JavaScript：

document.getElementById("englishButton").addEventListener("click", englishClick);

function englishClick() {
  russianButton.style.backgroundColor = "WhiteSmoke";
  englishButton.style.backgroundColor = "teal";
  hebrewButton.style.backgroundColor = "WhiteSmoke";
  englishTable.style.visibility = "visible";
  hebrewTable.style.visibility = "hidden";
  russianTable.style.visibility = "hidden";
}

Answer 2

当结合使用WebForms和javascript时，这是常见的误解。在纯JavaScript（html和javascript）中，当您“返回false”时，意味着您不希望执行该操作。因此，如果您写

<input type="submit" onclick="return false;" />

这意味着提交按钮将不起作用。在纯Webforms中，您的工作水平很高（主要是在服务器端），每次回发都会重新呈现整个页面。即使您只是更改了一些微小的内容-整个html + css + javascript都会反复往复并重新计算和重新渲染。无赖啊？

这是一个混合意图的经典案例。您需要确定自己在做什么-如果您打算使用纯HTML + Java脚本（伪代码）：

<input type='button' onclick='englishButton' value='English' />

甚至更好（仍然是伪代码，但是html5伪代码）

<button onclick='return englishButton();'>English</button>

如果您要使用Webforms-坚持这样做-请在服务器端进行操作，并使其优雅，简单，快速地呈现。如果您不关心网络流量和花费过多的开销，而是希望一切都在短时间内启动并运行，Webforms也很有意义。

但是最好选择其中一种，不要将这两种方法混在一起。

即使函数返回false，ONCLientClick（）也会回发

2 个答案: