button的click事件触发的提交问题_input button onclientclick事件-优快云博客

本文链接：https://blog.youkuaiyun.com/xrjohn/article/details/46470741

项目中遇到input(button) onclick事件调用js方法后，即使使用return false仍执行onserverclick事件，导致后台方法多次触发，引发数据库多条记录插入。通过对比分析input(button)和Asp:Button的事件处理，发现OnClientClick和onclick等效，onserverclick和OnClick等效。解决方法见：http://blog.youkuaiyun.com/gchonghavefun/article/details/8112830

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近的项目中遇到一个问题，input(button)的onclick事件调用js方法之后，虽然在方法中写了return false，却依旧执行了onserverclick事件调用的后台方法，然后换成Asp:Button，写在OnClientClick事件中，也执行了OnClick事件。不仅是提交部分，在网络较慢的情况下，后台btnSubmit_ServerClick事件会多次触发，导致向数据库插入了多条资料。

此处需注意的就是如下两个按钮中，inptut(button)的onclick方法和Asp:Button的OnClientClick方法等效，onserverclick方法和OnClick方法等效。

<input type="button" id="btnSubmit" runat="server" value="確定" onclick="CheckInfoAdd();" onserverclick="btnSubmit_ServerClick" />
<asp:Button ID="btnSubmit" runat="server" Text="确定" OnClick="btnSubmit_ServerClick" OnClientClick="CheckInfoAdd();" />

CheckInfoAdd()方法如下：

function CheckInfoAdd() {
            var txtCheckDate = $("#txtCheckDate").val();
            var txtCheckStatus = $("#ddlStatus").val();
            //var txtRemarks = $("#txtRemarks").val();
            if (txtCheckDate && txtCheckStatus) {
                __doPostBack("btnSubmit", "");
            }
            else {
                alert("时间和状况不能为空！");
                return false;//<span style="color:#ff0000;">here to 阻止提交</span>
            }
        }

如上，在return false后依旧没有停止提交，后来检查想起来在什么地方看到过需要在click事件中增加return，于是加上后，OK，解决了这个问题，后台事件多次触发的问题也解决了，但是却不知道是什么原理，所以大概查了下，详细说明可见如下链接，这个算是说的比较详细的。

这是修改后的代码：

<input type="button" id="btnSubmit" runat="server" value="確定" onclick="return CheckInfoAdd();" onserverclick="btnSubmit_ServerClick" />
<asp:Button ID="btnSubmit" runat="server" Text="确定" OnClick="btnSubmit_ServerClick" OnClientClick="return CheckInfoAdd();" />

http://blog.youkuaiyun.com/gchonghavefun/article/details/8112830