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

【问题标题】：ONCLientClick() posts back even when function returns false即使函数返回 false，ONCLientClick() 也会回发
【发布时间】：2019-11-11 12:58:55
【问题描述】：

我正在尝试使 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;
        }

样式发生变化，但页面立即刷新，样式返回其原始状态。

【问题讨论】：

另外值得注意的是 - 在客户端 - 没有“russianButton”。充其量（如果你使用静态 id 类型）你可以拥有var russianButton = document.getElementById('russianButton');，然后就像你写的那样。

标签： javascript html asp.net

【解决方案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";
}

【讨论】：

【解决方案2】：

在将 WebForms 与 javascript 结合使用时，这是一种常见的误解。在纯 javascript（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>

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

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

【讨论】：