今天遇到一个特别奇怪的事,在页面中使用button标签,添加了点击事件onclic,点击的时候倒是执行了绑定的方法,但页面被刷新了!

  什么鬼?我没与提交表单啊!

  原来,button默认具有提交表单的动作!!!

  咔嚓!这是哪个货设计的?要想避免button绑定事件同时会提交表单,有以下方法:

1,不使用button,使用<input type='button' />来代替,由于input标签为单标签,中间不能加东西,所以尽量使用span和label来取代button。

2,在onclick绑定的函数中,开头添加e.preventDefult(),阻止默认提交表单的行为。

点击button后刷新了页面的更多相关文章

  1. 点击 button 自动刷新页面

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

  2. Ionic3关闭弹出页面,跳转到列表后刷新父页面

    记得上次写过一篇如何弹出页面的文章,好像是2月28号ionic3 Modal组件那一篇,这篇也算那一篇的续集吧!这篇是弹出的页面关闭后刷新父页面的干活!上代码! 弹出页面:(关闭的时候可以传入值,再父 ...

  3. 点击button自动刷新页面的奇葩错误

    以前在写练习的时候遇到过这样一个问题,自己在html中写了一个button <button>test1</button> 在没有给其附上onclick事件时是点击是不会有任何反 ...

  4. window.open页面关闭后刷新父页面

    如题 function openWin(url,text,winInfo){ var winObj = window.open(url,text,winInfo); var loop = setInt ...

  5. 问题:asp.net 点击button按钮调到页面顶部;结果:asp.net点击一个按钮,使页面跳转到本面页上的指定位置

    asp.net点击一个按钮,使页面跳转到本面页上的指定位置 (2011-04-19 16:46:51) 转载▼ 标签: it   最近在做一个项目. 用到标题所说的功能. 实现方法: 1.在aspx中 ...

  6. [html]点击button后画面被刷新原因:未设置type="button"

    一.问题原因解析: 在form表单里的button, type 属性未设置的情况下,Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C ...

  7. ASP.NET 多次点击button后事件执行多次 并发解决 频繁操作解决办法

    首先让我们体验一下频繁操作: 1)打开项目,在后台aspx.cs等服务器页面,设置断点. 2)点击页面按钮 3)调试开始进入断点,然后重复点击页面按钮 4)服务器第一次事件已经处理完毕,调试再次进入了 ...

  8. 点击Button后,执行MouseDown的过程(使用Call Stack观察很清楚)

    Form1上放两个按钮Button1和Button2,默认输入焦点是Button1,现在点击Button2,产生WM_LBUTTONDOWN消息 procedure TForm1.Button2Mou ...

  9. button 自动刷新当前页面

    button请始终为按钮规定 type 属性.Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "sub ...

随机推荐

  1. delete 删除对象属性

    删除属性要直接删.

  2. 如何学Python

    如何学习Python? Python上手很容易, 基本有其他语言编程经验的人可以在1周内学会Python最基本的内容.它们包括:1.常用内置类型(int, float, bool, bytes, st ...

  3. System.Data.Entity.Core.EntityException: The underlying provider failed on Open. ---> System.InvalidOperationException: 超时时间已到。超时时间已到,但是尚未从池中获取连接。出现这种情况可能是因为所有池连接均在使用,并且达到了最大池大小。

    2017/8/15 20:55:21 [AgentPayQuery_205506102_1BBBB]系统异常:System.Data.Entity.Core.EntityException: The ...

  4. OEMCC 13.2 集群版本安装部署

    之前测试部署过OEMCC 13.2单机,具体可参考之前随笔: OEMCC 13.2 安装部署 当时环境:两台主机,系统RHEL 6.5,分别部署OMS和OMR: OMS,也就是OEMCC的服务端 IP ...

  5. webpack使用四

    鼎鼎大名的Loaders登场了! Loaders是webpack提供的最激动人心的功能之一了.通过使用不同的loader,webpack有能力调用外部的脚本或工具,实现对不同格式的文件的处理,比如说分 ...

  6. 安装FusionInsight

    1.在华为平台上下载整体客户端,不建议下载单个组件客户端,后期关联测试还是要装上的.   2.下载后需要将服务器上的客户端拷贝到本地.打开xShell,新建会话,登陆本地虚拟机上的Linux系统(19 ...

  7. dp入门 石子相邻合并 详细带图讲解

    题目: 有N堆石子,现要将石子有序的合并成一堆,规定如下: 1.每次只能移动相邻的2堆石子合并  2.合并花费为新合成的一堆石子的数量. 求将这N堆石子合并成一堆的总花费最小(或最大). 样例: 输入 ...

  8. java 3大特性

    1. 封装 : 定义: 封装是把过程和数据包围起来,对数据的访问只能通过已定义的接口. 作用: 封装通过对属性增加修饰符来控制数据的访问权限,定义数据的访问接口,增加了数据的隐秘性和安全性. 2.继承 ...

  9. html5-表单的综合实例

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  10. python读取excel中单元格的内容返回的5种类型

    (1) 读取单个sheetname的内容. 此部分转自:https://www.cnblogs.com/xxiong1031/p/7069006.html python读取excel中单元格的内容返回 ...