FullCalendar 在事件内添加复选框

Question

我需要在事件卡内添加一个复选框。

复选框将用于选择事件而不是打开它。

如果用户单击活动本身（而不是复选框），活动将打开进行编辑。

但是如果用户单击复选框，则会选择该事件而不是打开它。

我正在使用 eventClick 打开事件，并且工作正常。 我已在事件 HTML 上添加了复选框。

但是，当我单击复选框时，会触发 eventClick 而不会触发复选框上的 (change) 事件。

我正在使用 Angular。

参见下面的代码：

活动点击：

eventClick: this.handleEventClick.bind(this),

活动 HTML

'<div>' +
   '<input class="form-check-input" (change)="ShiftSelect($event)" type="checkbox" />' +
'</div>'

事件未触发：

ShiftSelect(values:any){
    this.isChangeOption = true;
}

事件触发：

handleEventClick(info: EventClickArg) {}

活动：

我尝试删除 eventClick 以查看复选框事件是否会被触发，但没有。

Answer 1

您似乎遇到了事件传播问题，其中复选框上的单击事件向上冒泡到父容器，触发eventClick函数而不是绑定到复选框的ShiftSelect函数（change）活动。

HTML 文件

'<div (click)="openEventForEdition(info)">' +
   '<input class="form-check-input" (change)="shiftSelect($event)" type="checkbox" />' +
'</div>'

TypeScript 文件

openEventForEdition(info: EventClickArg) {
    // Your logic to open the event for edition
}

shiftSelect(event: Event) {
    // Prevent the event from bubbling up to the parent container
    event.stopPropagation();
    
    // Your logic for selecting the event
    this.isChangeOption = true;
}

通过在 shiftSelect 函数中调用 event.stopPropagation()，可以防止单击事件向上传播到父容器，确保当复选框被选中时，仅触发复选框上的 (change) 事件处理程序clicked，而不是 eventClick 函数。