label中嵌套input时，在label上绑定click()事件执行两次（angular2+，javascript）

最新推荐文章于 2022-07-22 16:56:46 发布
最新推荐文章于 2022-07-22 16:56:46 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： javascript angular 文章标签： angular2+ label+input触发两次click
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yaomengzhi/article/details/80651663
版权
当label中嵌套input时，点击label会导致click事件触发两次，原因是事件冒泡和input的click事件同时触发。解决方法是将input移出label，并在input上绑定change事件，label上绑定click事件，确保两者不关联。在Angular2+中，可以使用[(ngModel)]进行双向数据绑定。
摘要由CSDN通过智能技术生成 
//html
<label class="radio-inline" (click)="onLabel()">
    <input type="radio" name="optionsRadiosinline"/> radio
最低0.47元/天 解锁文章
雨若雪汐
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2023年前端面试汇总-React
越陌度阡
06-29 777
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event
JavaScript基础学习笔记
qq_42436532的博客
04-10 885
JS基础 1.运算符 1.1 自增运算符 var e = 10; var f = e++ + ++e; // 1. e++ = 10 e = 11 // 2. e = 12 ++e = 12 console.log(f); // 22 1.2 逻辑运算符 1.2.1 逻辑与 有假必假，两边都是true才返回true 对于数值和表达式： 语法： 表达式1 && 表达式2 如果第一个表达式的值为真，则返回表达式2 如果第一个表达式的值为假，则返回表达式1 conso
angularjs input 搜索框触发请求太频繁，使用lodash.js的 debounce节流提高性能
baidu_30907803的博客
09-29 2274
参考链接：https://ask.helplib.com/javascript/post_1177398 由于个人项目是使用angularjs1.3以上，则可以直接使用angularjs 自带的ng-model-options="{ debounce: 1000 }"属性即可 &lt;div ng-controller="Ctrl"&gt; &lt;form name="userFor...
旧题重现：HTML Label标签结合Input的应用
WebWalker
02-18 2118
巧妙的应用Label，设置焦点 Examples of form inputs marked up with the tag Form element looks like Coded like: First Name: First Name: <input class="input" type="text" title="Enter your first
解决label标签包裹input后点击事件触发两次问题
D浩DzD的博客
03-03 1449
通常在为了使用户体验更好，在一些复选框或单选框和输入框中，会使用label包裹input这样用户只需点击后面文字，即可选中当前项。 代码结构如下 <ul class="table-main " @mouseenter.stop="myMouseenter(index)" :class="{'table-main-active':mouseIndex==index?true:false, 'table-main-actived':selectIndexArr.indexOf(index)!=-1
在label中包裹input,同时给label添加点击事件,会发现事件执行两次
hangGe0111的博客
08-15 2841
问题:在label中包裹input,同时给label添加点击事件,会发现事件执行两次; 原因:input的时间冒泡 解决方法: html <label id="lab"> <input type="checkbox" name="" id="che" value="" checked="true"/>check1 </label> 方法一：将事件绑定...
input与label联合使用的两种方式
热门推荐
weixin_38098192的博客
11-08 3万+
当用户选择label标签时，浏览器会自动将焦点转移到个label相关的input上 1.通过为input设置属性id，在label标签中设置for=id使label文本与对应的inpu他结合起来。 &lt;label for="name"&gt;Name:&lt;/label&gt; &lt;input id="name" type="text"/&gt; 2.label标签包裹input..
Angular
Poggie的博客
07-22 4272
学习前端的第一周，从Angular开始，使用Vs code
Angular 开发
qt的博客
02-27 5494
Angular 企业实战开发 1. 概述 Angular 是一个使用 HTML、CSS、TypeScript 构建客户端应用的框架，用来构建单页应用程序。 Angular 是一个重量级的框架，内部集成了大量开箱即用的功能模块。 Angular 为大型应用开发而设计，提供了干净且松耦合的代码组织方式，使应用程序整洁更易于维护。 Angular Angular 中文 Angular CLI 2. 架构预览 2.1 模块 Angular 应用是由一个个模块组成的，此模块指的不是ESModule，而是 Ng
Angular 1.0 入门指南
追逐阳光
04-11 7989
Angular 1.0 入门指南1. angular 1.0 特点 数据双向绑定MVVM 隔离作用域 2. Angular 的作用域 scopescope rootScope 先来看一下 angular 的一般使用格式 //作用域定义 模块注入 angular.module('myApp', ['ui.bootstrap']);//获取定义的App var app = angular.mod
java jlabel里面加button_在Java Swing中通过JLabel覆盖JButton？
weixin_28933179的博客
02-13 285
是否可以在Swing中将Button叠加在Label上？例如,如果有一个带有图像的JLabel而没有文本,我想在我的JLabel上覆盖我的按钮.标签定义如下：myLabel = new javax.swing.JLabel(new ImageIcon( myPicture ));如果没有,那么任何想法我怎么能意识到这一点,谢谢.编辑：其实我读到有关添加JPanel到JLabel,当我添加一个面板按...
用label标签包含input的好处
科技向善
12-27 2117
<label for="agree"> <!-- 如果有label连文字都可以点 --> <input type="checkbox" id="agree" v-model="isAgree">同意协议 </label> 用label标签包含input标签的话，点击文字的时候，也可以单击按钮 ...
组件 —【多重按钮组嵌套】
Zyl_CN的博客
05-26 327
&lt;div class="btn-group" role="group" aria-label="..."&gt; &lt;button type="button" class="btn btn-default"&gt;1&lt;/button&gt; &lt;button type="button" class=
js 中，为一个里面带有input 的label 绑定事件后在父元素绑定单机事件，事件执行两次，求解
qq_23490959的博客
08-30 300
改变下思路，我的是，把事件绑定到input上面，解决问题，然后使用for 标签指向input元素 <li class="option" > <input type="radio" id="inputid"/> <label for="inputid">点击label，和点击inpu效果 一样</label> </li> $...
label标签单击事件会执行两次，解决方案
qq_36611673的博客
09-17 819
<label class="checkbox fl"><input type="checkbox" name=""></label> $(".shopCarBox .item .checkbox").click(function(){ $(this).toggleClass("on") }) 使用label里会以有冒泡操作，即执行两次单击事件，需阻止冒泡...
label与input同用时，如何解决点击相应两次？
weixin_34318326的博客
07-24 340
很多时候我们希望点击checkbox后面的文字之后，checkbox能相应的选中或者取消选中，要实现这种效果很简单就是把input标签放到label标签里面 像这样，但是很快我们就会发现问题，点击label获取input的value值的时候，会获取到两个值，这个不用多说，网上有很多对于这个结果的解释，那么到底有什么好的办法解决这个问题呢？其实很简单 只需要将input拿到label外面，然后给i...
点击label时click事件被触发两次的坑
weixin_30449453的博客
11-08 449
今天帮群里的朋友看一段代码的时候偶然间遇到一个label的坑，点击label的时候，监听的click事件被执行两次； 具体代码如下： 1 　　<div id="test"> 2 　　<input type="checkbox" name="abc" id="abc"/> 3 　　<label for="abc">34234324324...
Angular 2+中文文档详解：从入门到高级
"迈向Angular 2 + 文档"是一份全面的Angular 2及后续版本的学习资料，它为不同层次的开发者提供了详尽的指导。该文档主要包括以下几个部分： 1. **快速起步**（Quickstart）：作为一个初级指南，它为初学者介绍了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值