以前在写练习的时候遇到过这样一个问题,自己在html中写了一个button

<button>test1</button>

在没有给其附上onclick事件时是点击是不会有任何反应的 
但是把这个button放入from表单时

<form action="testAction" method="psot">
<button>test1</button>
</form>

无论有没有给button附上事件,点击后页面都会刷新 
查找了半天资料网上有说是不是事件写错了或者是js冲突啊之类的问题,在确认了自己的所有方法没有写错之后,按照那些教程改了之后依旧没有解决,那么出现这种错误就不是冲突的问题



后来将button的代码加了一个type属性之后,问题就解决了

<button type="button">test1</button>

到这个时候才发现自己犯了一个很弱智的问题,<button> 标签有一个默认的属性是type="submit" 等于说如果你不自己手动覆盖的话,每一个默认写的button都是起到submit的作用,自然页面就会刷新。当加上type="button" 后,button就变为了一个普通的按钮,需要加上onclick事件才会有相应的反应了。 
虽然只是一个微不足道的小bug,但对html不熟的我来说确实是修改了很长一段时间,所以特此记录下来,以防以后遇到相同的坑

点击button自动刷新页面的奇葩错误的更多相关文章

  1. 点击 button 自动刷新页面

    问题:为什么点击 button 会刷新页面 ? 原因:你代码的写法可能如下图,把 <button> 按钮 写在 <form> </form> 标签里边啦. < ...

  2. form表单中的button自动刷新页面问题

    form表单中如果存在button的话,有可能会出现一个问题:点击button,触发了页面的自动刷新事件. 原因是因为<button>标签默认的类型是submit,即默认的button点击 ...

  3. HTML Button自动刷新页面的问题

    一.问题<button class="am-btn am-btn-default am-btn-xs am-text-secondary" data-id="99& ...

  4. layui点击按钮自动刷新页面问题

    问题 <button class="layui-btn layui-btn-primary" onclick="findData()">查询< ...

  5. js自动刷新页面代码

    <script language="JavaScript">function myrefresh(){window.location.reload();}setTime ...

  6. 高并发分布式系统中生成全局唯一(订单号)Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数

    高并发分布式系统中生成全局唯一(订单号)Id   1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...

  7. javascript(js)自动刷新页面的实现方法总结

    自动刷新页面的实现方法总结: 1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔 ...

  8. 使用gulp插件来自动刷新页面。

    http://itakeo.com/blog/2016/05/19/gulpreload/?none=123 使用gulp插件来自动刷新页面.再也不用修改一次,按一下F5了. 首选通过npm inst ...

  9. gulp+browserSync自动刷新页面

    BrowserSync “Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平 ...

随机推荐

  1. protobuf、LRU、sigleflight

    今天咱一次讲3个吧,赶一下进度,好早点开始聊kubernetes! 从groupcache的项目目录结构看,我们今天要学习groupcachepb.lru.singleflight这3个package ...

  2. 痞子衡嵌入式:飞思卡尔i.MX RT系列MCU启动那些事(5)- 再聊eFUSE及其烧写方法

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RT系列MCU的eFUSE. 在i.MXRT启动系列第二篇文章 Boot配置(BOOT Pin, eFUSE) 里痞子 ...

  3. Select默认选择后台参数

    之前写过一个这样的方法,后来需求开发中,发现了方法的BUG,然后我又重新找了一种方法,今天来记录一下. 先声明前台 <select name="type" class=&qu ...

  4. Windows已遇到关键问题,将在一分钟后自动重新启动,请立即保存工作

    Windows已遇到关键问题,将在一分钟后自动重新启动,请立即保存工作 1. 把电脑右下角网络断开 2.同时按 "WIN+R" 打开“运行”命令窗口 输入“cmd”命令,按回车键“ ...

  5. IIS配置HTTPS

    1,新建网站,选中类型为 https,然后更改SSL证书为你配置的SSL证书, 对于SSL证书的配置是这样的 点开第二步,然后点击 创建自签名证书 确定以后点开网站看到有个SSL, 双击进去,再选中 ...

  6. chrome设置网页编码

    新版的 chrome 没有这个设置选项,可以借助插件 charset 插件实现,到 web store 搜索安装即可.

  7. Java开发笔记(十六)非此即彼的条件分支

    前面花了大量篇幅介绍布尔类型及相应的关系运算和逻辑运算,那可不仅仅是为了求真值或假值,更是为了通过布尔值控制流程的走向.在现实生活中,常常需要在岔路口抉择走去何方,往南还是往北,向东还是向西?在Jav ...

  8. angular懒加载

    生成module和routing.module文件 {//路径 path: 'InfectionFillInComponent', loadChildren: './component/his/inf ...

  9. 使用代码检查Dynamics 365中的备用键状态

    摘要: 微软动态CRM专家罗勇 ,回复304或者20190213可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 备用键(Al ...

  10. 记录自己使用GitHub的点点滴滴

    前言 现在大多数开发者都有自己的GitHub账号,很多公司也会以是否有GitHub作为一项筛选简历以及人才的选项了,可见拥有一个GitHub账号的重要性,本文就从最基本的GitHub账号的注册到基本的 ...