<button> 元素点击后刷新的问题

最新推荐文章于 2022-11-09 11:30:21 发布
最新推荐文章于 2022-11-09 11:30:21 发布
阅读量643 收藏
点赞数
分类专栏： button html 文章标签： button chrome firefox input html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ricky1217/article/details/6900314
版权

在做一个  chrome 插件时，发现里面的按钮  <button> 点击后会刷新页面，而用 <input type=button> 就不会。

后来查看  w3cschool 中 html 的 button 元素，原来<button> 也是要指定类型的 <button type=button> ，在 chrome 、firefox 等中，默认是 <button type=submit>

ricky1217
关注
专栏目录
layui点击按钮页面会自动刷新的解决方案
10-16
这种方法的原理是，<input type="button">在所有浏览器中都不会导致表单提交，因此可以避免页面刷新问题。 #### 解决方案二：修改<button>标签的type属性 另一种方法是在<button>标签上显式地设置type属性为...
如何避免form表单内点击button按钮导致页面刷新？解决方案大揭秘！
weixin_50407990的博客
03-24 2712
在Web开发中，我们经常会使用form表单来收集用户提交的数据，但是有时候在form表单内点击button按钮会导致页面刷新，这对用户体验来说是十分不友好的。默认情况下，form表单内的button按钮的type属性为submit，也就是说，当用户点击这个按钮时，会自动将表单内的数据提交到后台处理。通过本文的介绍，我们了解了form表单内点击button按钮会刷新页面的原因，并掌握了两种避免刷新页面的方法。除了表单提交按钮的默认行为会刷新页面，还有一些其他情况也会导致页面的刷新。
事件里面元素怎么立即刷新dom(页面)，而不是等所有代码运行完再刷新。（强制刷新DOM）
我只是个很菜的前端
07-26 2646
事件里面元素怎么立即刷新dom(页面)，而不是等所有代码运行完再刷新。（强制刷新DOM）
按钮Button点击后页面刷新咋办？(Web；Html；Css；Javascript)
HowToPause的博客
10-13 4309
在写完页面的一个按钮后，你点击了，发现有反应，嗯嗯没有问题。但是突然你又感觉到不对劲——为啥页面刷新了？其实弄清楚问题的原因解决办法就很好找了。
点击button按钮整体页面刷新
JiAyInNnNnN123的博客
11-09 2050
(2)表单提交时，所有具有name属性的html输入元素(包括input标签、button标签、select标签等)都将作为键值对提交，除了Submit对象。(1)Submit将表单提交(form.submit())作为其onclick后的默认事件，Button并非如此。button按钮的默认type是submit,当type是submit的时候会触发action。当前form中action为空，所以直接跳转当前页面，导致搜索按钮点击，页面重新加载一遍。问了同事，说可能是button默认的type导致的。
button没写type=button会导致点击时提交
09-04
在网页开发中，`<button>` 元素是用于创建可点击的交互式按钮的，它可以在表单中或者独立于表单使用。在HTML5规范中，`<button>` 元素有三种不同的类型，它们决定了按钮的行为，具体如下： 1. **type="submit"**：...
Ajax提交Form表单页面仍会刷新问题的快速解决办法
10-20
在表单中，通常会有提交按钮（`<input type="submit">`或`<button>`），当用户点击这个按钮时，浏览器会默认提交表单数据到服务器，导致页面刷新。然而，如果我们希望使用Ajax来提交表单，就需要阻止这种默认行为。 ...
网页版电话号码抽奖
02-16
开发者可能使用了DOM（文档对象模型）来操作HTML元素，创建抽奖界面，并利用AJAX（异步JavaScript和XML）技术实现非刷新页面的数据交换，保持用户体验的流畅性。 程序允许内容不仅是电话号码，也可以是参与者的姓名...
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
10-16
在HTML代码片段中，我们看到了一个`<button>`元素，它有一个`onclick`事件监听器，用于在点击时触发特定的JavaScript函数。 1. **layui button**：在layui中，`layui-btn`类用于定义按钮样式，`layui-btn-primary`...
HTML Button自动刷新页面的问题
weixin_33935777的博客
04-10 741
一、问题 <button class="am-btn am-btn-default am-btn-xs am-text-secondary" data-id="99" data-type=1><span class="am-icon-pencil-square-o"></span>修改</b...
web前端开发中button标签点击后导致页面刷新
beizijingzx的博客
06-20 6316
web前端开发中，button标签点击后页面自动刷新。
点击button后刷新了页面
weixin_30522183的博客
03-25 666
　　今天遇到一个特别奇怪的事，在页面中使用button标签，添加了点击事件onclic，点击的时候倒是执行了绑定的方法，但页面被刷新了！ 　　什么鬼？我没与提交表单啊！ 　　原来，button默认具有提交表单的动作！！！ 　　咔嚓！这是哪个货设计的？要想避免button绑定事件同时会提交表单，有以下方法： 1，不使用button，使用<input type='button'...
【Html】解决 button 按钮点击后自动刷新页面的问题
Jessieeeeeee的博客
01-09 8464
问题 页面上有一个查询按钮为 Button 标签，点击查询按钮后会自动刷新页面，令人费解，查资料后发现是 button 的默认行为导致的。 <button class="btn btn-default active" id="btnAdd" click="selectData()">查询</button> 原因 button，input type=button 按钮在 IE 和 w3c，firefox 浏览器区别： 1、当在 IE 浏览器下面时，button 标签按钮，input
点击button后刷新页面
熙冰
01-17 1521
如果在Form中使用button标签，点击后会刷新页面，因为button除了Internet Explorer外的其他浏览器的type默认值是submit，具有提交表单的动作，要想避免button绑定事件同时会提交表单，为button按钮增加一个type=”button”属性。 <button type="button">点击</button> ...
点击button会自动刷新页面
weixin_30496431的博客
03-13 3328
如题 因为button标签按钮会提交表单。 解决方法如下： 1、将<button></button>改为<input type="button"> 或者直接在<button>中添加属性 type="button". 2、在button的点击事件中加入“e.preventDefult()” $('btn').click(func...
<div> <button @click="refreshIframe">刷新</button> <i-frame :src="url" ref="iframeRef" id="myIframe" /> </div>怎么刷新这个iframe
最新发布
09-11
在Vue.js中，如上所示的HTML结构中，有一个按钮`<button>`绑定了`@click`事件到`refreshIframe`函数，这意味着当用户点击这个按钮时，会触发`refreshIframe`方法。`<i-frame>`标签用于加载外部内容，并通过`:src`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值