点击＜button＞按钮会刷新页面问题

0x3fffff

于 2023-12-09 20:39:15 发布

阅读量500

点赞数

分类专栏：经验杂谈文章标签：前端 java javascript

本文链接：https://blog.youkuaiyun.com/qq_19655605/article/details/134900206

版权

19 篇文章

订阅专栏

本文介绍了如何在HTML表单中避免默认的按钮提交行为：一是通过设置按钮type属性为button，二是使用JavaScript的event.preventDefault()。详细步骤和示例代码有助于开发者理解和应用。

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

问题描述

<button  type="button">按钮</button>

button默认的type为submit，如果刚把他放在form表单中也会触发acton，如果没有指定action就会跳转到本页面看着和刷新一样

1.使用 type="button"： 在按钮元素中添加 type="button" 属性，这将告诉浏览器按钮不应该触发表单的默认提交行为。

<form id="myForm" method="post">
    <!-- 表单内容 -->
    <button type="button" onclick="submitForm()">Submit</button>
</form>

2.使用 JavaScript 阻止默认行为：在按钮的点击事件处理函数中调用 event.preventDefault() 阻止默认的提交行为。

<form id="myForm" method="post">
    <!-- 表单内容 -->
    <button onclick="submitForm(event)">Submit</button>
</form>

function submitForm(event) {
    event.preventDefault(); // 阻止默认提交行为
    // 执行其他逻辑
}