文档章节

button绑定onclick事件问题追踪

只尺八寸
 只尺八寸
发布于 2015/12/09 14:00
字数 407
阅读 87
收藏 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
昌平
程序员
私信 提问
JS中事件绑定

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

新网学会
2017/12/04
0
0
jquery change click 相关

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

guangfeng
2014/03/10
362
4
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
405
0
jquery 使用on绑定监听事件,如何传递参数的问题

jquery 使用on绑定监听事件,如何传递参数的问题 平常监听组件是这样的 提交 在JavaScript中: function submit(msg){ alert(msg); } 这样就完成了监听事件。 但是用on绑定就是 $('.bt...

黄贤达
2017/06/29
253
1

没有更多内容

加载失败,请刷新页面

加载更多

JAVA-四元数类

public class Quaternion { private final double x0, x1, x2, x3; // 四元数构造函数 public Quaternion(double x0, double x1, double x2, double x3) { this.x0 = ......

Pulsar-V
10分钟前
8
0
Xshell利用Xftp传输文件,使用pure-ftpd搭建ftp服务

Xftp传输文件 如果已经通过Xshell登录到服务器,此时可以使用快捷键ctrl+alt+f 打开Xftp并展示Xshell当前的目录,之后直接拖拽传输文件即可。 pure-ftpd搭建ftp服务 pure-ftpd要比vsftp简单,...

野雪球
11分钟前
0
0
要混乱还是要混蛋——《西欧中世纪》读后感2900字

要混乱还是要混蛋——《西欧中世纪》读后感2900字: 这本书读了多久?好像有一年了,我翻了之前做摘抄的记录,最早一条是今年年初写的。这本书有多少页? 580多页,还不算厚厚一叠欧洲皇室谱...

原创小博客
16分钟前
1
0
Confluence 6 文档主题合并问答

在 Confluence 官方 前期发布的消息 中,文档主题在 Confluence 6.0 及其后续版本中已经不可用。我们知道你可能对这个有很多好好奇的问题,因此我们在这里设置了一个问答用于帮助你将这个主题...

honeymose
45分钟前
2
0
java框架学习日志-2

上篇文章(java框架学习日志-1)虽然跟着写了例子,也理解为什么这么写,但是有个疑问,为什么叫控制反转?控制的是什么?反转又是什么? 控制其实就是控制对象的创建。 反转与正转对应,正转...

白话
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部