即使函数返回 false，ONCLientClick() 也会回发

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

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

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

这意味着提交按钮将不起作用。在纯 webforms 中，您正在一个非常高的级别（主要是在服务器端）工作，并且每次回发都会重新呈现整个页面。即使你只是改变了一些微小的东西 - 整个 html+css+javascript 会来回重新计算和重新渲染。无赖，啊？

这是一个典型的混合意图案例。你需要决定你在做什么 - 如果纯 html + java-script 是你的意图使用（伪代码）：

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

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

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

如果 webforms 是你的东西 - 坚持 - 在服务器端进行操作并保持优雅、简单和快速呈现。如果您不关心网络流量和花费太多开销，而是希望一切都在短时间内启动并运行，那么 Webforms 也很有意义。

但是您可能最好选择其中一种而不是混合这两种方法。

Answer 2

如果您不希望它与服务器交互，为什么不使用纯 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";

}