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

我有一个按钮（

）。单击后，页面将重新加载。由于我有一些jQuery

hide（）

函数在页面加载时被调用，这会导致这些元素再次被隐藏。如何使按钮不执行任何操作，以便我仍然可以添加单击按钮时发生的一些操作，但不重新加载页面。

使用元素或使用

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

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

或

在HTML中：

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

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

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

在HTML中：

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

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

---

为了避免在所有“按钮”上刷新，即使指定了onclick。

也不需要使用js或jquery。 要停止页面重新加载，只需将按钮类型指定为“button”。 如果您未指定按钮类型，浏览器会将其设置为“重置”或“提交”，从而导致页面重新加载

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

提交

如上面的一条注释（隐藏）所述，这可以通过不将按钮标签放在表单标签内来解决。当按钮位于表单外部时，页面不会自行刷新

我还不能发表评论，所以我将此作为答案发布。 避免重新加载的最佳方法是@user2868288所说的：使用

表单

标记上的

onsubmit

从这里提到的所有其他可能性来看，这是唯一一种允许触发新HTML5浏览器数据输入验证的方法（

和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>

$（文档）.ready（函数（）{
$（'#btnsupmit'）。单击（函数（）{
var tel=$（“#txtTel”）.val（）；
var email=$（“#txtEmail”）.val（）；
$.post（“scripts/contact.php”{
电话一:电话:，
email1：电子邮件
})
.完成（功能（数据）{
$（'#lblEstatus'）。追加（数据）；//追加状态
如果（数据==“已接收”）{
$（“#btnSubmit”）.attr（'disabled'，'disabled'）；//禁用双击器。
}
})
.fail（函数（xhr、textStatus、errorshown）{
$（'#lblEstatus'）.append（“Error.Try-later”）；
});
});
}); 

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

$（文档）.ready（函数（$）{
$（文档）。关于（'提交'，'提交表单'），函数（事件）{
event.preventDefault（）；
警报（“页面未重新加载”）；
});
});

提交
您也可以使用JavaScript实现：

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

默认情况下，元素会导致在chrome中重新加载（至少）。如果您仍然不想，您仍然可以使用FormonSubmit事件并返回falsereturn@Joe事实上，不幸的是，它确实存在：/I我需要我的webapp为IE8工作，而且重新加载有点烦人…@pbeardshear如果它被放在表单中，它就存在。当
放置在表单外部时，不会发生刷新！将
type=“button”
添加到chrome中的
元素中，它不会刷新。这不起作用。在chrome中返回false，至少在最新版本中，仍然会导致刷新。这是唯一对我有效的答案。我刚刚在函数中输入了return false，在safari和chrome中刷新都停止了。这确实有效！它是
的一个很好的替代品。这很好，尤其是在Chrome（公认的答案没有）在Windows10上运行的情况下。赞成！这很好，但在您实现后，它不会强制执行必填字段。