如何实现表格行可点击跳转但点击复选框不触发跳转？

我懂你现在的困扰——给表格行加了点击跳转，但点首列的复选框时也会触发跳转，这完全不是想要的效果对吧？其实只要在点击事件里加个判断，区分点击的是复选框还是行内其他区域就行，具体改法如下：

修改后的代码 #

$(document).ready(function() {
    $('table[name=$tableName]').DataTable();
    
    $('table[name=$tableName] tbody').on('click', 'tr', function(event) {
        // 判断点击的目标是不是复选框，或者复选框的父元素（比如label包裹的情况）
        if ($(event.target).closest('input[type="checkbox"]').length) {
            return; // 如果是复选框，直接返回，不执行跳转
        }
        // 非复选框区域，执行跳转
        $(location).attr('href', 'http://stackoverflow.com/');
    });
});

代码说明 #

• 我们通过event.target获取到实际被点击的元素，再用closest()方法往上查找有没有复选框元素。
• 如果找到了复选框（length > 0），就直接终止函数，不执行跳转逻辑；
• 要是点击的是行内其他区域，就正常执行页面跳转。

这样就能完美区分两种点击行为啦，点复选框只会触发选中功能，不会跳页，点行里其他地方则正常跳转~

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