文档章节

button绑定onclick事件问题追踪

只尺八寸
 只尺八寸
发布于 2015/12/09 14:00
字数 407
阅读 62
收藏 0
点赞 0
评论 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

jquery change click 相关

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

guangfeng ⋅ 2014/03/10 ⋅ 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

ListView 包含Button 的事件问题

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

长平狐 ⋅ 2012/09/03 ⋅ 0

Android Butterknife

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

wongstar ⋅ 2017/11/28 ⋅ 0

jquery 使用on绑定监听事件,如何传递参数的问题

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

黄贤达 ⋅ 2017/06/29 ⋅ 1

jquery function中创建DOM并绑定到button onclick事件

在JS文件中通过ajax获取到后台传过来的一个标志位,根据这个标志位,决定一个button的onclick事件,此时需要在ajax的回调函数中,动态创建一个function,并绑定到这个button的onclick事件上,...

flamehazi ⋅ 2012/09/24 ⋅ 2

技术分享连载(七十七)

原文链接:https://blog.uwa4d.com/archives/2016.html 我们将从日常技术交流中精选若干个开发相关的问题,建议阅读时间15分钟,认真读完必有收获。如果您有任何独到的见解或者发现也欢迎联系...

UWA4D ⋅ 2017/12/06 ⋅ 0

JavaScript 浏览器事件解析

  JavaScript、浏览器、事件之间的关系   JavaScript 程序采用了异步事件驱动编程(Event-driven programming)模型,维基百科对它的解释是:      事件驱动程序设计(英语:Event-d...

前端技术栈 ⋅ 2017/01/03 ⋅ 0

onclicklistener

 OnClickListener listener = new OnClickListener() {   public void onClick(View v) {   // TODO Auto-generated method stub   //用getId()获取用户点击的按钮id   if (v.getId......

若相惜_ ⋅ 2014/08/31 ⋅ 4

没有更多内容

加载失败,请刷新页面

加载更多

下一页

2018上海云栖大会workshop-日志数据采集与分析对接

摘要: 日志数据采集与分析对接 课程描述 通过日志服务采集用户、数据库、业务等访问数据。演示对于业务日志分析与处理,程序日志查询与监控,打通日志与数据仓库对接案例。 日志种类 网站访...

猫耳m ⋅ 29分钟前 ⋅ 0

SpringMVC中的ContentNegotiatingViewResolver配置

pom.xml <properties><commons-lang.version>2.6</commons-lang.version><slf4j.version>1.7.6</slf4j.version><spring.version>4.1.3.RELEASE</spring.version> <jack......

颖伙虫 ⋅ 31分钟前 ⋅ 0

Spring Boot 2.0正式发布,升还是不升呢?

Spring几乎是每一位Java开发人员都耳熟能详的开发框架,不论您是一名初出茅庐的程序员还是经验丰富的老司机,都会对其有一定的了解或使用经验。在现代企业级应用架构中,Spring技术栈几乎成为...

java高级架构牛人 ⋅ 32分钟前 ⋅ 0

打包时隐藏打印日志

1.打包时不允许项目中有打印的日志,可以在pch中加入下面这段代码即可 #ifdef DEBUG# define Log(fmt, ...) NSLog((@"%s [Line %d] " fmt), __PRETTY_FUNCTION__, __LINE__, ##__VA...

小黑202 ⋅ 33分钟前 ⋅ 0

SSL双向认证的实现

环境 系统:archlinux/centOS nginx:nginx/1.12.2 浏览器:火狐firefox 前提:1.安装nginx。    2.安装openssl。 生成证书 新建工作目录  首先建立一个工作目录,这里以我的工作目录为例...

颖辉小居 ⋅ 39分钟前 ⋅ 0

vscode 代码格式化,语法检查插件ESLint+Prettier

ESLint+Prettier prettier只关注格式化 ,插件prettier-vscode,编辑器的配置setting.json会出现prettier插件的相关配置节点,同时也能看到一些默认的配置信息。 安装成功后,编辑器默认的格式...

momo1987 ⋅ 42分钟前 ⋅ 0

使用TinyProxy搭建代理服务器

什么是TinyProxy 它是一个代理服务器,用来实现http或https代理,windows系统一直在用ccproxy, 非windows系统,怎么开放个http代理呢?那就是TinyProxy。 安装 直接执行命令即可 sudo apt-g...

bengozhong ⋅ 42分钟前 ⋅ 0

掌握需求过程

1,需求必须可度量、可测试 2,需求是什么? 功能需求 非功能需求 限制条件 3,Volere需求过程 采用Volere需求过程,最好采用RUP,增量,迭代,螺旋,Scrum或其他类似的迭代式开发过程 (注意...

霜叶情 ⋅ 46分钟前 ⋅ 0

分布式微服务云架构开发Web应用

举一个简单的例子,在快速入门工程的基础上,举一个简单的示例来通过Thymeleaf渲染一个页面。 @Controller public class HelloController { @RequestMapping("/") pub...

明理萝 ⋅ 48分钟前 ⋅ 0

图应用之关键路径(Critical Path)

之前我们介绍过,在一个工程中我们关心两个问题: (1)工程是否顺利进行 (2)整个工程最短时间。 之前我们优先关心的是顶点(AOV),同样我们也可以优先关心边(同理有AOE)。(Activity ...

临江仙卜算子 ⋅ 49分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部