阻止默认行为（preventDefault()）在Kendo网格自定义点击处理程序中不起作用。

Question

我已经为Kendo网格的“添加新记录”按钮添加了自定义点击处理程序，但JavaScript的preventDefault()函数似乎无法在其上工作。

$('.k-header').on('click', '.k-grid-add', function(e) {
    e.preventDefault();
    e.stopPropagation();
    // do something else
});

我希望“添加新记录”按钮不仅在网格中添加新行，还能做其他事情。

完整的代码示例：JSFIDDLE。

- CuriousSuperhero

Answer 1

这有效

$('.k-grid-add').click(function(e) {
    // do something else
    return false;
});

- BenG

---

编写 return false 和 e.preventDefault(); e.stopPropagation(); 是一样的。 - Kartikeya Khosla

Answer 2

查看更新的代码片段。

http://jsfiddle.net/qoxvaayn/5/

KendoUi也像jQuery一样附加了单击事件监听器，因此要删除现有的单击事件处理程序，我们应该使用off，然后再附加新的单击事件。

e.preventDefault(); e.stopPropagation();将停止默认事件处理程序行为，但不会停止已附加的监听器。

$('.k-header').off('click').on('click', '.k-grid-add', function(e) {
    //handler business logic here
});

- Koti Panga

Answer 3

（备选方案）

添加一个模板并创建一个自定义工具栏按钮“添加新记录”，并在该按钮上附加一个事件

类似于这样的东西

 <script type="text/x-kendo-template" id="template">
       <input type="button" value="Add new record" onClick="YOURFUNCTION()" class="k-button"/>
 </script>

<script>
$("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true,
        height: 550,
        toolbar: [{text: "", template: kendo.template($("#template").html())}],
        columns: [
            "ProductName",
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
            { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
            { field: "Discontinued", width: "120px" },
            { command: ["edit", "destroy"], title: "&nbsp;", width: "200px" }],
        editable: "inline"
    });
});

</script>

- Abbas Galiyakotwala