今天在开发中遇到一个问题,在使用类似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 中的事件修饰符,作用同上,拦截默认行为。
记录一下