如何为JS实现的可点击列添加右键“在新标签页打开”功能？

原函数的核心问题是：仅通过JavaScript的click事件模拟跳转，DOM中没有真实的<a>链接元素，浏览器无法识别这是可跳转的链接，因此右键菜单不会出现“在新标签页打开”选项。

我们可以通过给列插入一个覆盖全屏的透明<a>标签来解决，让浏览器识别这是链接，同时保留原有的交互逻辑。以下是修改后的完整函数代码：

$.fn.avia_link_column = function()
{
    return this.each( function()
    {
        var column = $(this),
            url = column.data('link-column-url'),
            target = column.data('link-column-target');

        // 跳过无效链接或已添加overlay的列
        if( typeof url !== 'string' || url.trim() === '' || column.find('.av-column-overlay-link').length )
        {
            return;
        }

        // 插入覆盖整个列的透明<a>标签
        var overlayLink = $('<a>', {
            'class': 'av-column-overlay-link',
            'href': url,
            'rel': 'noopener noreferrer'
        });
        // 设置target属性
        if( target === '_blank' )
        {
            overlayLink.attr('target', '_blank');
        }
        column.append(overlayLink);

        // 保留原有的点击事件逻辑，处理内部链接和平滑滚动
        column.on( 'click', function(e)
        {
            // 若点击的是内部已有链接，不触发列的跳转逻辑
            if( e.target && e.target.href )
            {
                return;
            }

            // 处理锚点链接的平滑滚动逻辑
            var link = window.location.hostname + window.location.pathname;
            url = url.trim();
            if( (column.hasClass('av-cell-link') || column.hasClass('av-column-link')) && 
                (url.startsWith('#') || (url.includes(link) && url.includes('#'))) )
            {
                var reader = column.hasClass('av-cell-link') ? column.prev('a.av-screen-reader-only').first() : column.find('a.av-screen-reader-only').first();
                reader.trigger('click');
                
                // 修复标签页切换的bug
                if( target !== '_blank' )
                {
                    window.location.href = url;
                }
                
                // 阻止overlay链接的默认跳转
                e.preventDefault();
                return;
            }

            // 非锚点链接交由overlay的<a>标签处理，无需手动跳转
        });
    });
};

配套CSS样式 #

需要添加以下CSS，让插入的<a>标签覆盖整个列且不影响视觉：

.av-column-link, .av-cell-link {
    position: relative; /* 父元素设为相对定位，确保overlay的绝对定位生效 */
}
.av-column-overlay-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* 确保在内容上方，但不遮挡内部元素的交互 */
    opacity: 0; /* 完全透明，不影响视觉 */
    display: block;
}

修改说明 #

1. 插入真实链接：初始化时给每个可点击列添加一个覆盖全屏的透明<a>，浏览器会自动识别为链接，右键菜单将显示“在新标签页打开”选项。
2. 保留原有逻辑：保留了内部链接的跳转拦截、锚点平滑滚动的处理逻辑，确保原有功能不受影响。
3. 优化判断条件：跳过无效链接和已处理的列，避免重复插入。

内容的提问来源于stack exchange，提问作者Kamil Kisieliński