点击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.平 ...
随机推荐
- SQL优化总结之一
一.实践中如何优化mysql 1) SQL语句及索引的优化 2) 数据库表结构的优化 3) 系统配置的优化 4) 硬件优化 二.索引的底层实现原理和优化 2.1 底层实现 在DB2数据库中索引采用的是 ...
- [Go] golang连接查询mysql
package main import ( "database/sql" _ "github.com/go-sql-driver/mysql" "lo ...
- 程序员50题(JS版本)(一)
程序1:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? for(var i=1,sum=0;i<=4;i++){ for(var j=1;j<=4;j++){ ...
- Sublime 无法安装插件的解决办法
1,打开命令面板 Ctrl + Shift + P 输入:pi 回车 按回车后,出现异常如下图: 解决办法: 1,点击Preferences----Brows Packages ---会到安装目录 ...
- Bootstrap方法之--排版、代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- vue中使用Element主题自定义肤色
一.搭建好项目的环境. 二.根据ElementUI官网的自定义主题(http://element.eleme.io/#/zh-CN/component/custom-theme)来安装[主题生成工具] ...
- 01-html介绍和head标签
[转]01-html介绍和head标签 主要内容 web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 HTML规范 HTML结构详解 一.web标准 web准备介绍: w3c:万维网 ...
- bootstrap-treeview 树形菜单带复选框以及级联选择
<div id="searchTree"></div> <script> var treeData = [{ text: "Paren ...
- 轨迹系列1——一种基于路网图层的GPS轨迹优化方案
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 GPS数据正常情况下有20M左右的偏移,在遇到高楼和桥梁等情况 ...
- 转摘app测试方法总结
app测试方法总结 一.安全测试 1.软件权限 1)扣费风险:包括短信.拨打电话.连接网络等. 2)隐私泄露风险:包括访问手机信息.访问联系人信息等. 3)对App的输入有效性校验.认证.授权.数 ...