Responsive DataTables行点击与展开图标冲突问题求助

这个问题的核心是事件冒泡：点击展开/折叠图标时，事件会向上冒泡到父级<tr>元素，从而触发了你绑定的行点击跳转逻辑。我们只需要在事件处理中判断点击的目标是不是展开控件，若是就阻止后续的跳转逻辑执行即可。

具体解决方案 #

在你的行点击事件处理函数开头，先检查点击的元素是否是DataTables Responsive的展开/折叠控件（通常带有.dt-control类），如果是则直接返回，不执行跳转代码：

$('#jobListTable tbody').on('click', 'tr', function (e) { 
    // 关键：判断点击的是否是展开/折叠控件，若是则跳过后续逻辑
    if ($(e.target).closest('.dt-control').length) {
        return;
    }

    var data = oTable.row( this ).data(); 
    if ( $(this).hasClass('selected') ) { 
        $(this).removeClass('selected'); 
    } else { 
        oTable.$('tr.selected').removeClass('selected'); 
        $(this).addClass('selected'); 
    } 

    var selectedTaskID = data.taskID; 
    var selectedJobNumber = data.jobNumber; 
    var selectedReqno = data.reqno; 
    var selectedPriority = data.priority; 
    var selectedCreatedBy = data.createdBy; 
    var selectedEmployeeInitials = data.employeeInitials; 
    var selectedShortDescription = data.shortDescription; 
    var selectedLongDescription = data.longDescription; 
    var selectedSourceReference = data.sourceReference; 
    var selectedAktivitetstype = data.aktivitetstype; 
    var selectedDueDatetime = data.dueDatetime; 
    var selectedRecurrence = data.recurrence; 
    var selectedStatus = data.status; 
    var selectedStatusColor = encodeURIComponent(data.statusColor); 
    var teamID = ""; 
    if (sessionStorage.getItem("teamID")) { 
        teamID = "&teamID="+sessionStorage.getItem("teamID"); 
    } 

    document.location.href="jobinfo.php?taskID="+selectedTaskID+"&jobNumber="+selectedJobNumber+"&reqno="+selectedReqno+"&priority="+selectedPriority+"&createdBy="+selectedCreatedBy+"&employeeInitials="+selectedEmployeeInitials+"&shortDescription="+selectedShortDescription+"&longDescription="+selectedLongDescription+"&sourceReference="+selectedSourceReference+"&aktivitetstype="+selectedAktivitetstype+"&dueDatetime="+selectedDueDatetime+"&recurrence="+selectedRecurrence+"&status="+selectedStatus+"&statusColor="+selectedStatusColor+teamID; 
} ); 

原理说明 #

• $(e.target).closest('.dt-control')：通过closest()方法向上查找最近的带有.dt-control类的元素，这个类是DataTables Responsive默认给展开/折叠按钮添加的类。
• 如果找到该元素，说明用户点击的是展开/折叠图标，此时return终止函数执行，不会触发页面跳转；否则继续执行原来的选中和跳转逻辑。

这样修改后，点击展开图标只会触发子行的展开/折叠，不会跳转到新页面，而点击行的其他区域依然可以正常跳转。

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