文档章节

button绑定onclick事件问题追踪

只尺八寸
 只尺八寸
发布于 2015/12/09 14:00
字数 407
阅读 71
收藏 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
333
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
397
0
Android Butterknife

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

wongstar
2017/11/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

java并发备忘

不安全的“先检查后执行”,代码形式如下: if(条件满足){ //这里容易出现线程安全问题//doSomething}else{//doOther} 读取-修改-写入 原子操作:使用CAS技术,即首先从V中读取...

Funcy1122
今天
0
0
SpringBoot2.0 停机

最近新建了个SpringBoot2.0的项目,因为原来一直使用的是传统的Tomcat部署war包的形式,所以这次SpringBoot内置Tomcat部署jar包的时候遇到了很多问题。其中一个就是因为没有外置的Tomcat容器...

Canaan_
昨天
0
1
Confluence 6 外部参考

一个外部参考的意思是任何站点链接到你 Confluence 的实例。任何时候当 Confluence 的用户单击这个外部链接的时候,Confluence 可以记录这次单击为参考。 在默认的情况下,外部链接的参考链接...

honeymose
昨天
0
0
Android中的设计模式之抽象工厂模式

参考 《设计模式解析》 第十一章 Abstract Factory模式 《设计模式:可复用面向对象软件的基础 》3.1 Abstract Factory 抽象工厂 对象创建型模式 《Android源码设计模式解析与实战》第6章 创...

newtrek
昨天
0
0
Redis | 地理空间(GEO)的一个坑

Redis的地理空间(Geo)是个好东西,轻轻松松的就可以把地图描点的问题处理了, 最近却遇到一个坑...Redis采用的Msater-Slave模式, 运用GEORADIUS在salve读取对应的数据,新增了从节点但是从不返...

云迹
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部