文档章节

button绑定onclick事件问题追踪

只尺八寸
 只尺八寸
发布于 2015/12/09 14:00
字数 407
阅读 367
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

写个简单的demo看下

<button onclick="aa(this);">click</button>
 <script type="text/javascript">
 function aa(obj){
  obj.innerHTML=0;
 }
 </script>

这并不会触发浏览器页面刷新效果,加个form表单试试

<form>
  <button onclick="aa(this);">click</button>
 </form>
 <script type="text/javascript">
 function aa(obj){
  obj.innerHTML=0;
 }
 </script>

结果就刷新页面了,为什么呢?

研究发现原来button这个控件在form表单里面的时候默认是submit类型的,会提交表单,怎么办呢?

(IE的默认类型是 "button",而其他浏览器中(包括W3C规范)的默认值是"submit")

1、加return false;

 <form>
  <button onclick="aa(this);return false">click</button>
 </form>
 <script type="text/javascript">
 function aa(obj){
  obj.innerHTML=0;
 }
 </script>

2、添加类型type="button"

<form>
  <button type="button" onclick="aa(this);">click</button>
 </form>
 <script type="text/javascript">
 function aa(obj){
  obj.innerHTML=0;
 }
 </script>

3、改用input

<form>
  <input type="button" onclick="aa(this)" value="click">
 </form>
 <script type="text/javascript">
 function aa(obj){
  obj.value=0;
 }
 </script>

总结:
当在IE浏览器下面时,button标签,input标签type属性为button是一样的功能,不会对表单进行任何操作。
但是在W3C浏览器,如Firefox下,button会提交表单,而input标签type属性为button不会对表单进行任何操作。

另外要注意的是:

表单中使用button,不同的浏览器会提交不同的值。IE提交 <button> 与 <button/> 之间的文本,而其他浏览器将提交 value 属性的内容,所以在表单中尽量使用 input 元素来创建按钮。

上一篇: 细说清除浮动
下一篇: 简单自动轮播
只尺八寸
粉丝 2
博文 20
码字总数 8239
作品 0
昌平
程序员
私信 提问
加载中
请先登录后再评论。
Netty那点事(三)Channel与Pipeline

Channel是理解和使用Netty的核心。Channel的涉及内容较多,这里我使用由浅入深的介绍方法。在这篇文章中,我们主要介绍Channel部分中Pipeline实现机制。为了避免枯燥,借用一下《盗梦空间》的...

黄亿华
2013/11/24
2W
22
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.3K
1
服务器自动化任务解决方案--Huginn

Huginn 是雅虎开发的一个系统,可以帮你执行自动化的在线任务。可以阅读网页,关注事件,并采取相应操作。Huginn 通过一个直观的事件流图来展示各种操作和事件。通过在你自己的服务器上的管道加...

匿名
2013/03/15
1.7W
0
异步Tor控制协议的实现--txtorcon

txtorcon是一个基于Twisted的异步Tor控制协议的实现。Twisted 是一个用Python写的事件驱动的网络引擎,和洋葱路由网络Tor是一个旨在促进人们的隐私和安全的互联网。它包括单元测试有96% +覆盖...

匿名
2012/11/23
620
0
XUI Lib

XUI 是一个高效、灵活易用的 Windows UI 库,使用 C++ 编写,基于 ATL 库。 Features: Layout by XML. Full basic controls: Static, Button, Edit, List (by aggregation), Tree, Animation......

匿名
2012/11/29
1.4W
0

没有更多内容

加载失败,请刷新页面

加载更多

汇总一下 Intellij IDEA 常用的牛逼插件!

来源:blog.csdn.net/sunny243788557/java/article/details/106011723 1、日晒主题 Solarized Themes 2、idea上 类调用时序图 SequenceDiagram for IntelliJ IDEA 3、彩色括号 Rainbow Brac......

路人甲Java
昨天
12
0
StringBuider 在什么条件下、如何使用效率更高?

点击上方“方志朋”,选择“设为星标” 回复”666“获取新整理的面试文章 作者:后青春期的Keats cnblogs.com/keatsCoder/p/13212289.html 引言 都说 StringBuilder 在处理字符串拼接上效率要...

方志朋
昨天
7
0
预告|悬镜子芽:新一代灰盒安全测试技术实践分享

点击蓝字 关注我们 万物皆有法,方能有序运行。网络安全进化到内生安全时代,以框架为起点,规划全景,技术内生外长,不断叠加,形成新一代网络安全之道。2020北京网络安全大会(BCS2020)已...

悬镜
昨天
0
0
zoom免费用户无法在中国登陆,RHUB免费续航zoom

中美关系日趋紧张,许多产品强制要求用户站队,zoom已经做了选择,抛弃众多信任、认可zoom产品的用户。微软选择坚持为中国用户提供服务,谁又说得来明天会如何?我们如此泱泱大国,竟要受制于...

osc_gt7nq50v
16分钟前
10
0
kubernetes 安装笔记

ssh -p 9000 root@127.0.0.1 192.168.56.101 master-node 192.168.56.102 work-node1 192.168.56.103 work-node2 由于kubeadm 默认从官网k8s.grc.io下载所需镜像,国内无法访问,因此需要通过......

solate
17分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部