阻止链接默认点击时，如何兼容快捷键打开新标签页？

你的代码通过e.preventDefault()完全屏蔽了链接的默认行为，导致浏览器无法响应快捷键触发的新标签/窗口打开操作。要解决这个问题，只需在事件处理逻辑中先判断是否有触发默认行为的条件，再决定是否执行自定义跳转。

修改后的代码 #

<a href="/site2" id="viewmore">View more</a>
<script>
// code is strongly simplified, for more clarity
document.getElementById("viewmore").addEventListener("click",function(e) {
   // 判断是否需要交由浏览器处理默认打开行为
   if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) {
       return; // 直接返回，不执行自定义跳转
   }
   e.preventDefault();
   myHandler.goTo(e.currentTarget.href);
});
</script>

判断条件说明 #

• e.metaKey：Mac系统中按下CMD键时为true
• e.ctrlKey：Windows/Linux系统中按下Ctrl键时为true
• e.shiftKey：按下Shift键时为true，浏览器通常会在新窗口打开链接
• e.button === 1：鼠标中键（滚轮键）点击时触发，同样会打开新标签

这样既保留了正常点击时的无刷新跳转逻辑，又能让浏览器正确响应快捷键或中键触发的新标签/窗口打开操作。

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