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

60 阅读 0 评论 40 点赞

我是靠谱客的博主等待美女，最近开发中收集的这篇文章主要介绍label中嵌套input时，在label上绑定click()事件执行两次（angular2+，javascript），觉得挺不错的，现在分享给大家，希望可以做个参考。

//html

<label class="radio-inline" (click)="onLabel()">
    <input type="radio" name="optionsRadiosinline"/> radio
</label>

onLabel(){

console.log('label1')

}

//结果

label1

原因：因为点击label的时候，事件冒泡一次，同时会触发关联的input的click事件，导致事件再次触发事件

解决办法：

将input标签写在lable标签外面，for id 在label与input中去除，在input中绑定change事件，label中绑定click事件。

input 与label不关联

//id="mylabel"

// for="mylabel"

<input type="radio" name="optionsRadiosinline"  (change)="onLabel()"/>

<label class="radio-inline" (click)="onLabel()">
    radio
</label>

//执行结果

label(){}

label

//对于angular可以使用[(ngModel)]双向绑定获取数值

//阻止事件冒泡、事件捕获都尝试过了，不管用

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。