我有下面的堆叠闪击
当我将点击事件表单li移动到输入更改时，它触发了一次，但是
event.stopPropagation();
不起作用。
https://stackblitz.com/edit/bootstrap-pvjfbv?file=index.html
请帮助我花了很多时间，但无法使其正常工作
pengsijing 回答：Angular 6引导程序多选项目单击触发两次
删除'input'标签周围的'label'元素即可解决此问题。
cmake_minimum_required(VERSION 3.15)
project(morpion C)
set(CMAKE_C_STANDARD 99)
add_executable(morpion main.c game.c board.c player_manager_mock.c board_view_text.c tictactoe_erros.c test_checkEndOfGame.c)
set_property(GLOBAL PROPERTY DCONFIG_TEXTUI)
set_property(GLOBAL PROPERTY DCONFIG_PLAYER_MANAGER_MOCK)
您必须发出@output
在模板文件中-在输入复选框而不是li上应用更改事件
<li *ngFor="let item of data_source" >
<label class="checkboxcontainer checkbox-inline">
<input type="checkbox" (change)="SelectElementCliked($event,item)"/>
<span class="checkmark"></span>
<span class="text">{{item.Text}}</span>
</label>
</li>
在ts文件中
SelectElementCliked(event: any,item: any) {
if ( event.target.checked ) {
console.log(item);
this.onItemSelected.emit(item);
}
}
将
<li *ngFor="let item of data_source" (click)="SelectElementCliked($event,item)" >
<label class="checkboxcontainer checkbox-inline">
<input [id]="item.Value" [name]="item.Value" type="checkbox" />
<span class="checkmark"></span>
<label (click)="$event.stopPropagation()" [for]="item.Value" class="text">{{item.Text}}</label>
</label>
</li>
单击标签时，2个事件将传播到父组件，从而发出2个事件。您可以使用stopproagation来阻止标签元素的点击