以前在写练习的时候遇到过这样一个问题,自己在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. MySQL数据库实用技巧

    1.如何快速掌握MySQL? 培养兴趣 兴趣是最好的老师,不论学习什么知识,兴趣都可以极大地提高学习效率.当然学习MySQL 5.6也不例外.夯实基础 计算机领域的技术非常强调基础,刚开始学习可能还认 ...

  2. Markdown 语法详尽笔记大全 2019

    目录  0.介绍  1.快捷键  2.基本语法  2.1 分级标题 # 写法1 # 写法2 上下文标题  2.2 字体设置斜体.粗体.删除线 _*~  2.3 分割线 --- 或 ***  2.4 引 ...

  3. 第20章 定义客户端 - Identity Server 4 中文文档(v1.0.0)

    客户端表示可以从您的身份服务器请求令牌的应用程序. 详细信息各不相同,但您通常会为客户端定义以下常用设置: 唯一的客户ID 如果需要的秘密 允许与令牌服务的交互(称为授权类型) 身份和/或访问令牌发送 ...

  4. js如何使用正则表达式实现过滤HTML标签?(/<[^<>]+>/g)

    js如何使用正则表达式实现过滤HTML标签?(/<[^<>]+>/g) 一.总结 js进阶正则表达式实现过滤HTML标签(<>标签中不能包含标签实现过滤HTML标签 ...

  5. [PHP] 控制反转依赖注入的日常使用

    控制反转:控制权交给了自己的类 依赖注入:依赖另一个类,我没有手动去new它 <?php /*我自己要用的类*/ class User { private $name; private $age ...

  6. 数据结构(java版)学习笔记(一)——线性表

    一.线性表的定义 线性表是n(n>=0)个具有相同特性的数据元素的有限序列. 线性表是最简单.最常用的一种数据结构 线性表属于线性结构的一种 如果一个数据元素序列满足: (1)除第一个和最后一个 ...

  7. Maven(十三)Maven统一声明版本号

    情景:当使用Spring下的多个包时,为了方便版本号的统一管理,避免出现因不同版本号造成的错误,必须更改为统一的版本号,但是当项目过多时手动修改不方便,因此引入此标签可以方便进行统一的修改. pom. ...

  8. c++中求数组长度

    #include <iostream> using namespace std; template <class T> int getArrSize(T& arr){ ...

  9. js实现多个倒计时并行 js拼团倒计时

    本文是对类似于拼团,多个商品每个都有各自的js倒计时,一开始接到接到这个需求也是头疼了一阵子,如果是在商品列表少的时候完全就可以写成死的,固定的变量,写几个定时器就ok了, 但是这次数据是活的,看一些 ...

  10. #WEB安全基础 : HTML/CSS | 0x7HTML5和W3C验证

    标准,标准,什么都有标准 你听说过HTML5吗?这是一个新版本,当然也有新标准 我只准备了一个index.html文件 以下是代码 <!DOCTYPE html> <!--告诉浏览器 ...