以前在写练习的时候遇到过这样一个问题,自己在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. linux为什么不可以添加硬链接

    假设有个文件夹1 文件夹1里面还有个文件夹2 文件夹2里面还有个文件夹3 然后发现哎呀直接文件夹3放到文件夹1下就行了访问多方便. 也就是文件夹1下有文件夹2和文件夹3,然后问题就来了文件夹1下的文件 ...

  2. 启航 - cache2go源码分析

    一.概述 我们今天开始第一部分“golang技能提升”.这一块我计划分析3个项目,一个是很流行的golang源码阅读入门项目cache2go,接着是非常流行的memcache的go语言版groupca ...

  3. Thread之八:interrupt中断

    Java中断机制是一种协作机制,也就是说通过中断并不能直接终止另一个线程,它只是要求被中断线程在合适的时机中断自己,这需要被中断的线程自己处理中断.这好比是家里的父母叮嘱在外的子女要注意身体,但子女是 ...

  4. linux 内核的优化

    修改下面的这些参数,如果没有的话.直接复制进去就可以了 vim /etc/sysctl.conf 参数修改 vm.swappiness = net.ipv4.neigh. net.ipv4.conf. ...

  5. Excel读写

    http://www.cnblogs.com/mingforyou/archive/2013/08/26/3282922.html 读Excel代码如下: import java.io.File;im ...

  6. css——rgba()和opacity的区别

    (学习笔记) 首先他们都能实现透明效果,不同的是作用对象. rgba()是css中设置背景颜色中的一个属性.而opacity是css的一个属性,也就是rgba()的作用对象是元素的背景颜色或元素的颜色 ...

  7. vue+axios 前端实现的常用拦截

    一.路由拦截使用 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由,否则就进入登录页面,路由配置如下: cons ...

  8. js知识点总结

    组成 ECMAscript 基础语法     变量 数据类型 运算符 数组 函数 对象BOM 浏览器对象模型     window对象(获取浏览器宽高)     history对象     locat ...

  9. 仿9GAG制作过程(二)

    有话要说: 这次准备讲述用python爬虫以及将爬来的数据存到MySQL数据库的过程,爬的是煎蛋网的无聊图. 成果: 准备: 下载了python3.7并配置好了环境变量 下载了PyCharm作为开发p ...

  10. 支持JSP和Servlet的Web服务器

    支持JSP和Servlet的Web服务器 1.Tomcat 服务器 目前非常流行的Tomcat服务器是Apache-Jarkarta开源项目中的一个子项目,是一个小型.轻量级的支持JSP和Servle ...