点击button自动刷新页面的奇葩错误
以前在写练习的时候遇到过这样一个问题,自己在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自动刷新页面的奇葩错误的更多相关文章
- 点击 button 自动刷新页面
问题:为什么点击 button 会刷新页面 ? 原因:你代码的写法可能如下图,把 <button> 按钮 写在 <form> </form> 标签里边啦. < ...
- form表单中的button自动刷新页面问题
form表单中如果存在button的话,有可能会出现一个问题:点击button,触发了页面的自动刷新事件. 原因是因为<button>标签默认的类型是submit,即默认的button点击 ...
- HTML Button自动刷新页面的问题
一.问题<button class="am-btn am-btn-default am-btn-xs am-text-secondary" data-id="99& ...
- layui点击按钮自动刷新页面问题
问题 <button class="layui-btn layui-btn-primary" onclick="findData()">查询< ...
- js自动刷新页面代码
<script language="JavaScript">function myrefresh(){window.location.reload();}setTime ...
- 高并发分布式系统中生成全局唯一(订单号)Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数
高并发分布式系统中生成全局唯一(订单号)Id 1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...
- javascript(js)自动刷新页面的实现方法总结
自动刷新页面的实现方法总结: 1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔 ...
- 使用gulp插件来自动刷新页面。
http://itakeo.com/blog/2016/05/19/gulpreload/?none=123 使用gulp插件来自动刷新页面.再也不用修改一次,按一下F5了. 首选通过npm inst ...
- gulp+browserSync自动刷新页面
BrowserSync “Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平 ...
随机推荐
- MySQL数据库实用技巧
1.如何快速掌握MySQL? 培养兴趣 兴趣是最好的老师,不论学习什么知识,兴趣都可以极大地提高学习效率.当然学习MySQL 5.6也不例外.夯实基础 计算机领域的技术非常强调基础,刚开始学习可能还认 ...
- Markdown 语法详尽笔记大全 2019
目录 0.介绍 1.快捷键 2.基本语法 2.1 分级标题 # 写法1 # 写法2 上下文标题 2.2 字体设置斜体.粗体.删除线 _*~ 2.3 分割线 --- 或 *** 2.4 引 ...
- 第20章 定义客户端 - Identity Server 4 中文文档(v1.0.0)
客户端表示可以从您的身份服务器请求令牌的应用程序. 详细信息各不相同,但您通常会为客户端定义以下常用设置: 唯一的客户ID 如果需要的秘密 允许与令牌服务的交互(称为授权类型) 身份和/或访问令牌发送 ...
- js如何使用正则表达式实现过滤HTML标签?(/<[^<>]+>/g)
js如何使用正则表达式实现过滤HTML标签?(/<[^<>]+>/g) 一.总结 js进阶正则表达式实现过滤HTML标签(<>标签中不能包含标签实现过滤HTML标签 ...
- [PHP] 控制反转依赖注入的日常使用
控制反转:控制权交给了自己的类 依赖注入:依赖另一个类,我没有手动去new它 <?php /*我自己要用的类*/ class User { private $name; private $age ...
- 数据结构(java版)学习笔记(一)——线性表
一.线性表的定义 线性表是n(n>=0)个具有相同特性的数据元素的有限序列. 线性表是最简单.最常用的一种数据结构 线性表属于线性结构的一种 如果一个数据元素序列满足: (1)除第一个和最后一个 ...
- Maven(十三)Maven统一声明版本号
情景:当使用Spring下的多个包时,为了方便版本号的统一管理,避免出现因不同版本号造成的错误,必须更改为统一的版本号,但是当项目过多时手动修改不方便,因此引入此标签可以方便进行统一的修改. pom. ...
- c++中求数组长度
#include <iostream> using namespace std; template <class T> int getArrSize(T& arr){ ...
- js实现多个倒计时并行 js拼团倒计时
本文是对类似于拼团,多个商品每个都有各自的js倒计时,一开始接到接到这个需求也是头疼了一阵子,如果是在商品列表少的时候完全就可以写成死的,固定的变量,写几个定时器就ok了, 但是这次数据是活的,看一些 ...
- #WEB安全基础 : HTML/CSS | 0x7HTML5和W3C验证
标准,标准,什么都有标准 你听说过HTML5吗?这是一个新版本,当然也有新标准 我只准备了一个index.html文件 以下是代码 <!DOCTYPE html> <!--告诉浏览器 ...