label标签onclick的事件处理

最新推荐文章于 2024-07-30 03:19:04 发布

wdmcpgyje

最新推荐文章于 2024-07-30 03:19:04 发布

阅读量4k

点赞数 2

分类专栏： web 文章标签： label html javascript

本文链接：https://blog.csdn.net/wdmcpgyje/article/details/37907557

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天碰到一个问题

<html>
<head>
<script type="text/javascript">
function change(){
    alert(111);
}
</script>
</head>
<body>
<label οnclick="change()">
<input type="checkbox" value="1">是
</label>
</body>
</html>

当单击复选框时，change事件执行一次；但是当单击‘是’时，change事件却执行了两次，这让我十分纠结。经过各种百度前人的经验，终于让我找到的问题所在。

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。——摘自W3School

也就是当我单击'是'的时候，浏览器自动将焦点转移到了复选框上又执行了一次单机。所以change事件执行了两次。既然找到了问题所在，解决自然简单。将代码修改为

<label>
<input type="checkbox" value="1" οnclick="change()">是
</label>

问题解决

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wdmcpgyje

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

label标签和argument方法重载以及eval函数（详解）

爱吃蘑菇的小男孩

07-31

568

一 <label>标签及for属性 Label对象表示一个HTML<keygen>元素访问Label对象使用getElementById()来访问<label>元素 var x=document.getElementById("myLabel"); 创建Label对象 var x=document.createElement("LABEL"); L...

html lable 不显示,HTML标签不显示（Dojo 1.8）(HTML Label Not Displaying (Dojo 1.8))

weixin_35370061的博客

06-29

654

HTML标签不显示(Dojo 1.8)(HTML Label Not Displaying (Dojo 1.8))我正在使用Dojo 1.8动态创建一组复选框。创建复选框后，我还设置了复选框的标签，但标签在网站上不可见，虽然我在Firebug中查看HTML时可以看到它。我有什么想法我做错了吗？我在这一点上看了太多代码并且无法弄清楚它是什么。谢谢！var checkboxContainer ...

参与评论您还未登录，请先登录后发表或查看评论

label的奇特之处，内部一个Onclick事件触发所有onclick

爱雨轩

11-16

488

昨天遇到一个非常奇怪的问题，我在一个label内放了两个button，这两个button都有各自的onclick事件，但是发现当一个点击的时候，也会触发另外一个Onclick事件，今天在网上查了一下，才发现label的这个特殊性，不知道是bug还是设计的时候故意这样设计。大家可以回头看一下label的专业说明： <label> 标签为 input 元素定义标注（标记）。 ...

label 标签里面元素点击事件

weixin_30577801的博客

01-31

1016

想做一个单击显示，单击消失的效果，两个元素都在label标签里面，通过打log发现，当点击消失的时候，先执行了消失的单击事件，有执行了出现的单击事件，所以元素并没有消失，这个出现的原因是因为点击label标签里面的元素的时候就是单击在Label上面的，解决方案，把label标签换了，或者把要出现的元素不要放在label里面转载于:https://www.cnblogs.com/drizzle-w...

html使用label添加onClick事件触发两次

梦殇的博客

05-06

1158

<label className="modal-tip--erveryday" onClick={onClickModal}> <input type="checkbox"></input> <span>今日不再提醒</span> </label> 上述代码会导致click事件触发两次。因为input的click时间...

给label添加点击事件

雷国林的博客

10-16

1197

- (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { self.userInteractionEnabled = YES; } return self; } - (void)addTarg

HTML ＜label＞标签

weixin_50662941的博客

09-18

235

HTML <label> 标签什么是<label> 标签? <label> 标签为 input 元素定义标注（标记）。 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 <label> 标签的 for 属性应当与相关元素的 id 属性相同。实例 <form> <label for=

百度地图label中内个元素添加点击事件

weixin_45825057的博客

12-18

592

百度地图label中某个元素添加点击事件

a标签的href与onclick事件的区别详解

09-04

7. **实现复杂交互**：如示例所示，有时候我们可能希望在`<a>`标签内结合`onclick`和`href`实现更复杂的交互，比如在`<label>`中嵌套`<a>`标签，通过`onclick`触发父元素（`<label>`）的`click`事件，从而影响关联的...

javascript动态添加删除tabs标签的方法

12-10

`buildLabel`函数负责创建标签，它创建一个`<td>`元素，设置ID、不换行、高度、名称、标题、内联HTML（包含关闭按钮）以及鼠标事件处理。标签元素的`onclick`和`onmouseover`事件用于切换聊天窗口和改变鼠标样式。 ...

用图片作为label，for属性IE下不起作用

09-28

接着为img元素绑定一个onclick事件处理函数，在该函数中根据img被点击的类型（单选框、复选框、文本框等），执行相应的操作，如切换复选框的状态，或者将输入框获得焦点等。总结来说，这个问题的解决需要利用...

jquery label onclick

热门推荐

Jachin的博客

11-21

2万+

label标签引起的双重事件

关于下拉框的onchange事件和onclick选择value值。

angliliu2521的博客

04-09

848

下拉框的onchange事件和onclick，一般最好都选择onchange事件，onclick可能会不兼容有些浏览器。下面是代码： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选择</title> <...

asp.net label html,asp.net 给 Label添加一个点击事件

weixin_42316079的博客

06-26

700

publicclassButton : WebControl, IButtonControl, IPostBackEventHandler{//摘要://初始化 System.Web.UI.WebControls.Button 类的新实例。publicButton();//摘要://获取或设置一个值，该值指示在单击 System.Web.UI.WebControls.Button 控件时是否执行验...

html打开自动点击某一个div,Label标签自动触发onclick，点击内部的Input

weixin_42363377的博客

06-04

847

1&colon;时间戳转换成年月日函数，2&colon;url截取参数方法，3&colon;弹窗自定义方法 4&colon;点击按钮加入购物车最近一直在使用vue.js来构建项目,先分享一下一些简单可复用的函数. 1:时间戳转换Date.prototype.format = function(fmt){ //author: yumeiqia ...Sudoku...

关于label的点击事件(原创)

weixin_30686845的博客

12-24

1344

通常做网页时不会用radio和checkbox的原有样式，通常会进行样式美化，手机端我用的jqurey weui框架，他的原理是这样的: <label class="check_label" for="sort_4"> <input type="radio" class="weui_check" name="sort" id="sort_4"> ...

html_label标签

qq_43260366的博客

08-15

1741

通过 label标签的for属性和表单控件的id属性显示关联；如上代码：label标签与表单控件相关联，父组件绑定点击事件；当点击文本“名称：”时，会自动聚焦在input输入框中；隐士关联是直接使用label标签包裹表单控件；此时只有点击单选框才能选中，点击文本不起作用。此时点击男/女就会选中其前面的单选框；修饰符阻止了label标签的默认事件·；最近发现一个比较有意思的现象。阻止元素的默认事件；...

HTML标签、方法

辛聪明的博客

09-10

409

一、label标签 label标签为input元素定义标注(标记)，它不会向用户呈现任何特殊效果，和span标签类似。但label标签和span标签最大的区别就是它为鼠标用户改进了可用性，可以关联特定的表单控件。 label标签和特定表单控件关联之后，如果用户在 label 元素内点击文本，就会触发关联的表单控件。就是说，当用户选择该label标签时，浏览器就会自动将焦点转到和label标签相...

threejs标签添加点击事件

06-10

在 three.js 中，可以通过给标签添加监听器来实现点击事件。具体步骤如下： 1. 获取需要添加点击事件的标签对象，例如：var label = document.getElementById('my-label'); 2. 使用 addEventListener 方法为标签对象添加 click 监听器，例如：label.addEventListener('click', onClick); 3. 在监听器函数 onClick 中编写点击事件的处理代码，例如：function onClick() { console.log('Label clicked!'); } 完整的示例代码如下： ```javascript var label = document.getElementById('my-label'); label.addEventListener('click', onClick); function onClick() { console.log('Label clicked!'); } ``` 注意：在 three.js 中，标签对象通常是用来渲染 2D 文字和图片等内容，不是用来渲染 3D 模型的。如果需要为 3D 模型添加点击事件，可以使用鼠标拾取（raycasting）技术来实现。