劍道網格列中的按鈕單擊觸發整個行的onclick

Question

我們的客戶想要一個劍道網格，他可以在該行中單擊行中的任意位置以打開相應的詳細信息頁面。 我添加這樣的行：

const cols = [
    { field: "Date", title: "Date", template: "#=kendo.toString(kendo.parseDate(Date, 'yyyy-MM-dd), 'dd.MM.yyyy')#" },
    { field: "Title", title: "Title" },
    { field: "", command: ["destroy"], title: " " }];

let grid = $("#grid").kendoGrid({
    dataSource: this.dataSource,
    pageable: true,
    filterable: true,
    sortable: true,
    columns: cols,
    editable: "detail"
}).data("kendoGrid");
grid.one("dataBound", this.onDataBound.bind(this));

在我的函數onDataBound() ：

const grid = $("#grid").data("kendoGrid");
$(grid.tbody).on("click", "tr", function (e) {
    const rowData = grid.dataItem(this);
    const URL = startInfo.ApplicationRoot + "SomeDetailPage?SomeId=" + rowData.get("SomeId");
    window.open(URL, '_blank');
});

這完全按預期工作。 但是，如您所見，我有一列帶有刪除按鈕。 這是問題所在。 每當我單擊刪除按鈕時，都會收到確認消息（“您確定要刪除[...]嗎？”），實際上可以成功刪除該行，但是該行的詳細信息頁面會在我打開后立即打開。單擊按鈕。

單擊刪除按鈕時，如何讓該行知道不應打開詳細信息頁面？

Answer 1

您應該使用e.stopPropagation（）; 刪除按鈕上，因此它也不會將事件傳遞給該行。

Answer 2

我找到了解決方案。 將click函數綁定到行時，可以檢查tagName ：

$(grid.tbody).on("click", "tr", function (e) {
    if (e.target.tagName == "TD") {
        const URL = startInfo.ApplicationRoot + "SomeDetailPage?SomeId=" + rowData.get("SomeId");
        window.open(URL, '_blank');
    }
});

當我單擊按鈕時， tagName要么為“ SPAN”，要么為“ A”。 按鈕外的所有內容均顯示為“ TD”。