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

原创于 2018-06-11 15:43:35 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular2+ #label+input触发两次click

javascript 同时被 2 个专栏收录

7 篇文章

订阅专栏

angular

6 篇文章

订阅专栏

当label中嵌套input时，点击label会导致click事件触发两次，原因是事件冒泡和input的click事件同时触发。解决方法是将input移出label，并在input上绑定change事件，label上绑定click事件，确保两者不关联。在Angular2+中，可以使用[(ngModel)]进行双向数据绑定。

//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)]双向绑定获取数值

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