如何使 HTML 按钮不重新加载页面答案

【问题标题】：How do I make an HTML button not reload the page如何使 HTML 按钮不重新加载页面
【发布时间】：2010-12-25 02:19:14
【问题描述】：

我有一个按钮 (<input type="submit">)。当它被点击时，页面会重新加载。由于我有一些在页面加载时调用的 jQuery hide() 函数，这会导致这些元素再次被隐藏。如何让按钮什么都不做，这样我仍然可以添加一些在单击按钮时发生的操作，但不会重新加载页面。

【问题讨论】：

标签： html button dom-events

【解决方案1】：

不需要js或jquery。要停止页面重新加载，只需将按钮类型指定为“按钮”。如果您不指定按钮类型，浏览器会将其设置为“重置”或“提交”以重新加载页面。

 <button type='button'>submit</button>

【讨论】：

这确实有效！这是<input type='button' /> 的一个很好的替代品。
这很好用，尤其是在 Chrome 的情况下（接受的答案没有）
在 Windows 10 上的 Chrome 上工作。是的！
这很好，但在您实施后它不会强制执行必填字段。

【解决方案2】：

使用<button> 元素或<input type="button"/>。

【讨论】：

您仍然可以使用表单提交事件，如果您仍然不想返回，请返回 false
@Joe 实际上很不幸：/ 我需要我的 webapp 才能为 IE8 工作，而且重新加载有点烦人......
@pbeardshear 如果将其放置在表单中，则可以。当<button> 放置在表单之外时，不会发生刷新！
将type="button"添加到chrome中的<button>元素，它不会刷新

【解决方案3】：

在 HTML 中：

<form onsubmit="return false">
</form>

为了避免刷新所有“按钮”，即使分配了 onclick。

【讨论】：

【解决方案4】：

您可以使用 jQuery 在按钮上添加点击处理程序并返回 false。

$("input[type='submit']").click(function() { return false; });

或

$("form").submit(function() { return false; });

【讨论】：

这不起作用。在 chrome 中返回 false，至少在最新版本中，仍然会导致刷新。
这是唯一对我有用的答案。我只是在我的函数中添加了 return false 并且在 safari 和 chrome 中都停止了刷新。

【解决方案5】：

在 HTML 中：

&lt;input type="submit" onclick="return false"&gt;

对于 jQuery，一些类似的变体，已经提到过。

【讨论】：

【解决方案6】：

您可以使用包含提交按钮的表单。然后使用 jQuery 来防止表单的默认行为：

$(document).ready(function($) {
  $(document).on('submit', '#submit-form', function(event) {
    event.preventDefault();
  
    alert('page did not reload');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id='submit-form'>
  <button type='submit'>submit</button>
</form>

【讨论】：

【解决方案7】：

如上面其中一个 cmets (burried) 中所述，可以通过不将按钮标签放在表单标签内来解决此问题。当按钮在表单之外时，页面不会自行刷新。

【讨论】：

【解决方案8】：

我还不能发表评论，所以我将其发布为答案。避免重新加载的最佳方法是@user2868288 所说的：在form 标签上使用onsubmit。

从这里提到的所有其他可能性来看，这是允许触发新的 HTML5 浏览器数据输入验证的唯一方法（<button> 不会这样做，jQuery/JS 处理程序也不会这样做）并允许您的 jQuery/AJAX 动态要在页面上附加的信息。例如：

<form id="frmData" onsubmit="return false">
 <input type="email" id="txtEmail" name="input_email" required="" placeholder="Enter a valid e-mail" spellcheck="false"/>
 <input type="tel" id="txtTel" name="input_tel" required="" placeholder="Enter your telephone number" spellcheck="false"/>
 <input type="submit" id="btnSubmit" value="Send Info"/>
</form>
<script type="text/javascript">
  $(document).ready(function(){
    $('#btnSubmit').click(function() {
        var tel = $("#txtTel").val();
        var email = $("#txtEmail").val();
        $.post("scripts/contact.php", {
            tel1: tel,
            email1: email
        })
        .done(function(data) {
            $('#lblEstatus').append(data); // Appends status
            if (data == "Received") {
                $("#btnSubmit").attr('disabled', 'disabled'); // Disable doubleclickers.
            }
        })
        .fail(function(xhr, textStatus, errorThrown) { 
            $('#lblEstatus').append("Error. Try later."); 
        });
     });
   }); 
</script>

【讨论】：

【解决方案9】：

你也可以使用 JavaScript：

  let input = document.querySelector("input");
  input.addEventListener("submit", (event) => {
    event.preventDefault();
  })

【讨论】：

这应该是被批准的答案