如何在NonFactors MVC Grid中忽略被点击元素下方的元素？

嘿，我懂你现在的困扰——你的表格行点击会跳转到详情页，但行内的某些元素（比如按钮、链接或者操作控件）被点击时，你不希望触发这个跳转，对吧？这其实是因为事件冒泡：点击子元素时，事件会向上传递到父级的<tr>元素，从而触发了rowClicked回调。

这里有两种简单的解决方案，你可以根据自己的需求选择：

方案一：在rowClicked回调里判断点击目标 #

直接修改你现有的rowClicked函数，检查点击的元素是不是我们需要忽略的对象，如果是就跳过跳转逻辑：

$('.mvc-grid').mvcgrid({ 
    reloadEnded: function () { $('.lds-facebook').hide(); }, 
    rowClicked: function (row, data, e) { 
        // 检查点击的元素（或它的父元素）是否属于要忽略的类型/带有特定类
        // 这里可以自定义需要忽略的选择器，比如.ignore-row-click类、a标签、button标签等
        if ($(e.target).closest('.ignore-row-click, a, button').length > 0) {
            return; // 不执行跳转，直接退出函数
        }
        window.location.href = '@Url.Action("Details","CRMTItems")/' + data.Id 
    } 
});

接下来，只要给行内那些不想触发跳转的元素加上ignore-row-click类就行，比如：

<td><button class="btn btn-primary ignore-row-click">编辑项目</button></td>
<td><a href="/CRMTItems/Delete/@item.Id" class="text-danger ignore-row-click">删除</a></td>

这种方式的好处是逻辑集中在一个地方，不用额外绑定事件，非常灵活。

方案二：给忽略元素绑定事件阻止冒泡 #

如果你更倾向于从源头阻止事件传递，可以在表格加载完成后，给需要忽略的元素绑定点击事件，阻止事件冒泡到<tr>：

$('.mvc-grid').mvcgrid({ 
    reloadEnded: function () { 
        $('.lds-facebook').hide();
        // 给所有带ignore-row-click类的元素绑定点击事件，阻止冒泡
        $('.mvc-grid .ignore-row-click').on('click', function(e) {
            e.stopPropagation();
        });
    }, 
    rowClicked: function (row, data, e) { 
        window.location.href = '@Url.Action("Details","CRMTItems")/' + data.Id 
    } 
});

同样，你需要给要忽略的元素加上ignore-row-click类。这种方式适合你明确知道哪些元素需要阻止，且不想修改rowClicked主逻辑的场景。

两种方案都能解决你的问题，推荐方案一，代码更简洁易维护~

内容的提问来源于stack exchange，提问作者Bassie