label标签onclick的事件处理
2014-07-17 15:35
197 查看
今天碰到一个问题
当单击复选框时,change事件执行一次;但是当单击‘是’时,change事件却执行了两次,这让我十分纠结。经过各种百度前人的经验,终于让我找到的问题所在。
<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。——摘自W3School
也就是当我单击'是'的时候,浏览器自动将焦点转移到了复选框上又执行了一次单机。所以change事件执行了两次。既然找到了问题所在,解决自然简单。将代码修改为
<html> <head> <script type="text/javascript"> function change(){ alert(111); } </script> </head> <body> <label onclick="change()"> <input type="checkbox" value="1">是 </label> </body> </html>
当单击复选框时,change事件执行一次;但是当单击‘是’时,change事件却执行了两次,这让我十分纠结。经过各种百度前人的经验,终于让我找到的问题所在。
<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。——摘自W3School
也就是当我单击'是'的时候,浏览器自动将焦点转移到了复选框上又执行了一次单机。所以change事件执行了两次。既然找到了问题所在,解决自然简单。将代码修改为
<label> <input type="checkbox" value="1" onclick="change()">是 </label>问题解决
相关文章推荐
- a标签中使用onclick事件时,href的处理
- HTML+JS基础之a标签href与onclick事件的冲突处理
- a标签伪协议触发事件和onclick触发事件的this指针问题
- onclick 与 target 事件的处理
- 基于HTML标签的JavaScript触发事件处理
- IE6下链接onclick事件处理中的请求被aborted
- html A标签的onclick事件和href的使用
- JQuery设置onclick事件无效的处理方法
- 对部分<input>标签添加onclick事件
- firefox事件处理之自动查找event的函数(用于onclick="foo()")
- IE6下链接onclick事件处理中的请求被aborted
- 多个onclick在一起只执行最后一个的问题解,其它是事件处理引发的问题 (JavaScript的监听事件函数attachEvent和addEventListener)
- 一个jstl标签综合运用的例子(包括下拉列表事件处理等等),直观了解一个浏览器页面上有多少对象)
- 火狐下触发 a标签的onclick事件
- A标签触发onclick事件而不跳转
- A标签触发onclick事件而不跳转
- a标签伪协议触发事件和onclick触发事件的this指针问题
- IE6下链接onclick事件处理中的请求被aborted
- firefox事件处理之自动查找event的函数(用于onclick=foo())
- 事件处理006(标签)