Velocity模板中实现防双击链接：避免多次点击打开多窗口

嘿，我来给你几个简单又实用的法子，帮你搞定这个双击开多个窗口的问题！本质上咱们得靠前端JS来控制点击状态，毕竟Velocity最终输出的是HTML页面，直接在模板里加对应的逻辑就行：

方法1：标记点击状态，阻止重复跳转 #

这个方法适合需要用户之后还能再次点击的场景，比如跳转后用户返回页面还想点链接。咱们给链接加个点击事件，第一次点击后设个标志，后续点击就阻止默认跳转：

<a href="你的目标链接" id="singleJumpLink">点击跳转</a>

<script>
let hasClicked = false;
document.getElementById('singleJumpLink').addEventListener('click', function(e) {
    if (hasClicked) {
        e.preventDefault(); // 拦住重复点击的跳转
        return;
    }
    hasClicked = true;
    // 可选：3秒后恢复可点击状态，根据你的需求调整时间
    setTimeout(() => {
        hasClicked = false;
    }, 3000);
});
</script>

方法2：点击后直接禁用链接 #

如果这个链接是一次性的（比如跳转后页面就刷新或者离开当前页了），那可以直接让链接点击一次后就失效：

<a href="你的目标链接" onclick="disableAfterClick(this)">点击跳转</a>

<script>
function disableAfterClick(linkElement) {
    linkElement.onclick = null; // 移除点击事件
    linkElement.style.pointerEvents = 'none'; // 让链接不再响应鼠标点击
    // 还可以加个样式提示用户，比如变灰
    linkElement.style.opacity = '0.7';
}
</script>

方法3：CSS+JS做视觉反馈的控制 #

这个方法不仅能阻止重复点击，还能给用户明显的视觉提示，体验更好：

<style>
.clicked-link {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}
</style>

<a href="你的目标链接" id="safeClickLink">点击跳转</a>

<script>
document.getElementById('safeClickLink').addEventListener('click', function() {
    this.classList.add('clicked-link');
    // 同样可以加超时恢复可点击状态
    setTimeout(() => {
        this.classList.remove('clicked-link');
    }, 3000);
});
</script>

要是你的场景涉及后端请求（比如跳转同时提交数据），那最好再配合后端的幂等性处理，但单纯解决双击开多个窗口的问题，上面的前端方法完全够用啦！

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