点击表格行内复选框时，如何阻止触发跳转至openticket.php的事件

问题核心是事件冒泡机制：点击复选框时，事件会向上传递到父元素<tr>，触发了行的跳转逻辑。要解决这个问题，只需要在复选框的点击事件中阻止事件冒泡，同时执行你需要的自定义函数。

修改后的代码示例 #

<tr onclick="window.location='openticket.php';" class="cursor1">
    <td>
        <div class="classic">
             
        <div class="row ms-2" id="<?php echo $i['id']; ?>" onmouseover="display(<?php echo $i['id']; ?>)" onmouseleave="display2(<?php echo $i['id']; ?>)">
            
            <div class="col-1 mt-1 returnhide" id="hidecheckbox<?php echo $i['id']; ?>" style="display:none;">
            <div class="form-check">
            <input class="form-check-input checkboxcheckvalueofrow" type="checkbox" id="cb<?php echo $i['id']; ?>" name="ticketcheckbox[]" value="<?php echo $i['ticket_id']; ?>" onclick="event.stopPropagation(); yourCustomFunction();">
            </div>
            </div>
        </div>
        </div>
    </td>
    
    <td>Database issue</td>
</tr>   

关键说明 #

• event.stopPropagation()：这个方法会阻止当前事件继续向上冒泡到父元素，点击复选框时，<tr>的跳转逻辑就不会被触发。
• yourCustomFunction()：替换成你需要在点击复选框时执行的实际函数名称。
• 补充：原代码缺少<div class="row ms-2">的闭合标签，补上后能保证HTML结构正确，避免潜在布局问题。

如果你的自定义函数需要获取复选框的状态或值，可以这样写：

function yourCustomFunction() {
    const checkbox = event.target;
    // 示例逻辑：获取复选框的value和选中状态
    console.log('选中的ticket ID:', checkbox.value);
    console.log('是否选中:', checkbox.checked);
    // 这里添加你的业务代码
}

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