JS 如何处理链接被用户点击中键的操作

今天在开发中遇到一个问题，在使用类似Bootstrap中的Tabs组件时，当在tab导航链接点击中键时会打开一个新的窗口访问链接，于是我尝试在别的普通链接上点击中键时也会如此，我猜测这是浏览器的默认行为。

由于我开发的是一个浏览器在线代码编辑器，我希望的结果是点击中键关闭当前改标签，而不是新窗口打开链接。

既然是浏览器的默认行为，聪明的同学已经想到了事件的 preventDefault 方法。

例如给tab项目的连接添加一个 mousedown 事件，然后判断一下按下的键是哪个，中键就是事件的 button 属性为1，然后调用 preventDefault 方法拦截。一般在绑定的事件的句柄函数中操作。

const handlerClick = (event) => {
    event.preventDefault();
};

但还有一种更简单的方法，就是现在浏览器新增的一个事件 auxclick，监听一下即可。

在 Vue 中更简单

<template>
    <li class="nav-item">
        <a
           class="nav-link"
           @auxclick.prevent="() => {}"
        >
            未命名文件-1
        </a>
    </li>
</template>

.prevent 为 Vue 中的事件修饰符，作用同上，拦截默认行为。

记录一下