制作按钮不发布答案

【问题标题】：Make button NOT post制作按钮不发布
【发布时间】：2011-10-20 16:08:21
【问题描述】：

最终目标是在按钮被剪辑并且“顶部”小于 0 时让 div“动画”下来。我想使用一个按钮（用于样式）但是当我这样做时，它似乎发布。这是我的按钮：

<button id="expcoll" class="expcoll" onclick="expcoll();" runat="server">↓</button>

这是我的 javascript：

function expcoll() {
    var dFilter = document.getElementById("dFilter");
    var expcoll = document.getElementById("MainContent_expcoll");
    if (dFilter.offsetTop == 0) {
        $("#dFilter").css({ 'top': -200 });
        expcoll.innerHTML = "↓";
    }
    else {
        $("#dFilter").css({ 'top': 0 });
        expcoll.innerHTML = "↑";
    }
}

任何人都可以提出更好的方法或方法使其到达按钮未发布的位置吗？如果您对我为什么要使用按钮感到好奇，我尝试使用 mouseenter 和 mouseleave，但是因为一些文本框会打开 jQuery 日历，所以每当我这样做时，div 就会崩溃（但日历仍然存在） .然后我在 div 上做了一个“点击”功能，但如果我点击文本框，它会关闭（但日历会保留）。如果您需要更多信息，请告诉我。非常感谢。

【问题讨论】：

如果你不想回发，为什么是runat="server"？
我什至没有想到这一点。让我试试看。
这个语法很奇怪。那是什么样的html？
“发布”？你的意思是张贴表格吗？那里还有代码吗？
按钮在表单内，因为还有其他按钮可以发布，但我不希望这个发布。就语法而言，我不确定你的意思是什么，为什么它很奇怪。 Oded，当我拿出 runat="server" 时，它不会让我使用 onclick。

标签： asp.net html post button

【解决方案1】：

客户端点击事件需要返回 false 才能中止回发。尝试添加以下内容：

<button id="expcoll" class="expcoll" onclick="expcoll();return false;" runat="server">↓</button>

如果可以，你应该使用 ASP.NET 按钮控件：

<asp:Button ID="Button1" runat="server" OnClientClick="expcoll();return false;" ...>

编辑

如果你只是在函数末尾返回 false 可能会更整洁（感谢@Jon Hanna）：

function expcoll() { 
    var dFilter = document.getElementById("dFilter"); 
    var expcoll = document.getElementById("MainContent_expcoll"); 
    if (dFilter.offsetTop == 0) { 
        $("#dFilter").css({ 'top': -200 }); 
        expcoll.innerHTML = "↓"; 
    } 
    else { 
        $("#dFilter").css({ 'top': 0 }); 
        expcoll.innerHTML = "↑"; 
    } 
    return false;
} 

<button id="expcoll" class="expcoll" onclick="return expcoll();" runat="server">↓</button>

【讨论】：

非常好，非常感谢。我已经把我的“return false”；在函数内部而不是在函数之后。
如果你在函数中使用了return false，那么你也可以使用onclick="return expcoll();"。在这种情况下，它与@JamesJohnson 的答案几乎相同，但在其他情况下，它会让函数决定是否允许提交，这在很多时候都很有用。
@JonHanna：是的，你是对的。如果你愿意，你可以在函数结束时返回 false。
虽然在这种情况下差别不大，只是因为这似乎是 OP 正在考虑的路线。

【解决方案2】：

如果你想要一个客户端按钮，不要设置runat="server"。

顺便说一句，为函数和元素 ID 赋予相同的名称不是一个好主意 - javascript 引擎可能无法识别您正在尝试调用该函数，而是尝试调用该元素...

【讨论】：

如果我这样做，它不会让我使用 onclick。
@XstreamINsanity - “它不会让我”是什么意思？红色曲线？如果是这样，请忽略它们并尝试它。
这可能只是 Visual Studio，但它说：“Microsoft JScript 运行时错误：对象不支持此属性或方法”。但是，如果我将 runat="server" 放回那里，它就可以正常工作（只是刷新页面）。
就 ID 而言，它实际上在运行时更改为 MainContent_expcoll。我知道无论如何我都应该改变它，这只是我现在正在搞砸的事情。

【解决方案3】：

我不完全确定这个答案，但值得一试。我认为您可以在 javascript onClick() 方法的末尾添加一个return false;，它会阻止回发。

编辑：你也可以试试 onClientClick() 事件

【讨论】：

onClientClick 允许我在没有 runat="server" 的情况下工作，但它仍然“刷新”了页面。

【解决方案4】：

如果您希望能够调用expcoll()，则需要从OnClientClick 调用它，因为这是客户端点击事件。换句话说，您的标记应如下所示：

<asp:button id="expcoll" Text="↓" class="expcoll" onClientclick="expcoll();" OnClick ="EventHandlerForClickOnServerSide" runat="server"></asp:button>

编辑

仔细阅读，似乎您不想要服务器控件。改为这样做：

<input id="expcoll" class="expcoll" type="button" onclick="expcoll();">↓</input>

【讨论】：