使用JavaScript模拟<a>标签的悬停与点击行为问题

1. 调整HTML结构，实现悬停URL提示 #

要让浏览器左下角显示链接地址，必须借助原生<a>标签的特性。我们可以在可点击的表格行内添加一个透明且覆盖整行的隐藏链接，既不破坏原有表格结构，又能触发浏览器的URL提示：

<table class='table'>
    <thead>
        <tr>
            {% for h in data.header %}
                <th>{{h|trans}}</th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for row in data.rows %}
            {% set url = data.getOnClickURL(loop.index - 1) %}
            <tr {% if url %} class='clickable-row' data-url="{{url}}" {% endif %}>
                {% if url %}
                    <!-- 隐藏链接：触发浏览器URL提示 + 原生右键菜单选项 -->
                    <a href="{{url}}" class="row-link" target="_blank"></a>
                {% endif %}
                {% for r in row %}
                        <td>{{r|trans}}</td>
                {% endfor %}
            </tr>
        {% endfor %}
    </tbody>
</table>

搭配CSS让隐藏链接覆盖整行，且不影响视觉：

.clickable-row {
    position: relative;
    cursor: pointer; /* 显示手型光标，提示可点击 */
}

.row-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* 完全透明，不干扰内容显示 */
    z-index: 1; /* 确保在单元格内容上方，不影响点击交互 */
}

2. 升级jQuery逻辑，支持快捷键打开新标签 #

修改点击事件，判断用户是否按下Mac的CMD键或Windows/Linux的CTRL键，实现不同场景的跳转逻辑：

$('.clickable-row').on('click', function (e) {
    const url = $(this).attr('data-url');
    if (typeof url !== 'string') return;

    // 检测是否按下了新标签页快捷键
    const openNewTab = e.metaKey || e.ctrlKey;
    
    if (openNewTab) {
        window.open(url, '_blank');
    } else {
        window.location.href = url;
    }
});

额外优化点 #

• 隐藏的<a>标签还能让右键菜单自动出现「在新标签页打开」「复制链接地址」等原生选项，无需额外开发；
• cursor: pointer明确提示行可点击，提升用户感知。

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