如果单击单元格中的按钮，如何防止调用事件？

Question

在ts中我有这个：

   {
                headerName: '', field: 'delete', filter: 'text', editable: false,
                cellRenderer: (params) => {
                    let eDiv = document.createElement('div');
                    eDiv.innerHTML = '<span class="delete-btn"><button class="btn-simple"><i class="fa fa-trash"></i>Izbrisati</button></span>';
                    let eButton = eDiv.querySelectorAll('.btn-simple')[0];
                    this.gridoptions.api.stopEditing(true);
                    eButton.addEventListener('click', () => {
                        this.selectedMSISDNArray.rowData.splice(this.selectedMSISDNArray.rowData.indexOf(params.data), 1);
                        this.gridoptions.api.setRowData(this.selectedMSISDNArray.rowData);
                        this.message.info( params.data.msisdn + ' je uspješno uklonjen!');
                    });
                    return eDiv;
                }
            }

这是我的网格：

<ag-grid-angular *ngIf="selectedMSISDNArray&&selectedMSISDNArray.rowData&&selectedMSISDNArray.rowData.length&&activeTab===2" (cellEditingStopped)='cellValueChanged($event)' (selectionChanged)="onSelectionChanged($event)" #agGrid style="width: 100%; height: 300px;" class="ag-fresh" [gridOptions]="gridoptions" [columnDefs]="columnDefs" [rowData]="selectedMSISDNArray.rowData"></ag-grid-angular>

问题是我只希望此按钮点击不调用cellEditingStopped事件。有什么建议吗？

Answer 1

单击按钮时必须停止事件传播。

试试这个：

    {
                headerName: '', field: 'delete', filter: 'text', editable: false,
                cellRenderer: (params) => {
                    let eDiv = document.createElement('div');
                    eDiv.innerHTML = '<span class="delete-btn"><button class="btn-simple"><i class="fa fa-trash"></i>Izbrisati</button></span>';
                    let eButton = eDiv.querySelectorAll('.btn-simple')[0];
                    this.gridoptions.api.stopEditing(true);
                    eButton.addEventListener('click', (event) => {
                       /**** Added this line ****/
                        event.stopPropagation(); 
this.selectedMSISDNArray.rowData.splice(this.selectedMSISDNArray.rowData.indexOf(params.data), 1);
                        this.gridoptions.api.setRowData(this.selectedMSISDNArray.rowData);
                        this.message.info( params.data.msisdn + ' je uspješno uklonjen!');
                    });
                    return eDiv;
                }
            }