文档章节

button绑定onclick事件问题追踪

只尺八寸
 只尺八寸
发布于 2015/12/09 14:00
字数 407
阅读 79
收藏 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
程序员
jquery change click 相关

页面两个控件 一个input 一个button input绑定onchange事件 取数据的件数 button绑定onclick事件 取数据内容 并表示 问题: 光标有输入框迅速到按钮押下,button的click事件没有触发, 慢的话可...

guangfeng
2014/03/10
333
4
JS中事件绑定

事件绑定 事件绑定 IE方式 attactEvent(事件名称,函数),绑定事件处理函数 derachEvent(事件名称,函数),解除绑定 DOM方式 addEventListener(事件名称,函数,捕获) removeEventListener(事...

新网学会
2017/12/04
0
0
Vuforia7 for Unity2017.3用户自定义识别图及扩展追踪

Vuforia基础设置请参考:https://blog.csdn.net/qq_39308897/article/details/78037870; 因为Unity2017内置了Vuforia,在安装Unity的时候勾上就行了。 第一步:点击左上角的菜单栏File-Buil...

qq_39308897
04/11
0
0
ListView 包含Button 的事件问题

andriod 里面的ListView是一个显示列表数据的控件,非常好用,常用适配器SimpleAdapter进行绑定,绑定代码如下: ListView lstView = (ListView) this.findViewById(R.id.listView1); Simpl...

长平狐
2012/09/03
397
0
Android Butterknife

开发中找到xml中对应的ui并设置对应的事件,一般用findViewById,然后设置onClick事件来实现,这样写起来比较麻烦,有没更简单的?Butterknife本场的主角闪亮登场. Butterknife作用: 通过注...

wongstar
2017/11/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

WinDbg

参考来自:http://www.cnit.net.cn/?id=225 SRV*C:\Symbols*http://msdl.microsoft.com/download/symbols ctrl + d to open dump_file Microsoft (R) Windows Debugger Version 6.12.0002.633......

xueyuse0012
今天
2
0
OSChina 周五乱弹 —— 想不想把92年的萝莉退货

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @罗马的王:分享松澤由美的单曲《地球ぎ》 很久没看圣斗士星矢了 《地球ぎ》- 松澤由美 手机党少年们想听歌,请使劲儿戳(这里) @开源中国首...

小小编辑
今天
14
1
springBoot条件配置

本篇介绍下,如何通过springboot的条件配置,控制Bean的创建 介绍下开发环境 JDK版本1.8 springboot版本是1.5.2 开发工具为 intellij idea(2018.2) 开发环境为 15款MacBook Pro 前言 很多时候,...

贺小五
今天
1
0
javascript source map 的使用

之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大...

粒子数反转
昨天
1
0
谈谈如何学Linux和它在如今社会的影响

昨天,还在农耕脑力社会,今天已经人工智能技术、大数据、信息技术的科技社会了,高速开展并迅速浸透到当今科技社会的各个方面,Linux日益成为人们信息时代的到来,更加考验我们对信息的处理程...

linux-tao
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部