按下鼠标中键跳转新的页面

当我们用鼠标中键点击一个带href属性的a标签时，我们会发现它会跳转到新的页面。此时即使添加preventDefault属性也没有用。因为对于a标签，当用中键点击时，会默认从新窗口打开链接

要想阻止这一行为，我们可以将a标签转换为其他标签如span，再给span添加click属性。

比如，当我们使用vue的router-link标签创建路由标签时，默认创建的是a标签

<router-link :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
v-for='tag in visitedViews'
:key='tag.path'
:class='isActive(tag)? "active" : ""'
class='tags-views-item'
@click.middle.native="!isFix(tag)?closeSelectedTag(tag):''"
@contextmenu.prevent.native="openMenu(tag,$event)"
>
{{tag.title}}
</router-link>

当我们将router的tag属性设为span时，既可解决这一问题

<router-link :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
tag = 'span'
v-for='tag in visitedViews'
:key='tag.path'
:class='isActive(tag)? "active" : ""'
class='tags-views-item'
@click.middle.native="!isFix(tag)?closeSelectedTag(tag):''"
@contextmenu.prevent.native="openMenu(tag,$event)"
>
{{tag.title}}
</router-link>

拓展，对于a标签的target属性
规定在何处打开链接文档

_blank 在新标签页打开标签
_parent 在父级frameset打开标签
_self 在当前frameset打开标签
_top 去掉页框并用document.html取代frameset
framename 在名为framename的框架中打开标签

此外，若想了解更多关于router-link的用法可以参考官方文档

按下鼠标中键跳转新的页面相关推荐

简单的CSS在页面中点击超链接跳转新的页面
点击超链接后,重新打开一个新的网页,不是在原本的网页进行跳转. 打开创建的网页 a{/* 去除超链接的下划线 */text-decoration: none;}</style> </ ...
html 表单提交跳转新的页面,jquery模拟form表单提交并新打开页面
/** * form表单提交本页面打开 * @param url * @param params */ functionpostCurrent(url,params){ varform = $(&qu ...
微信小程序web-view环境下H5跳转小程序页面方法
web-view页面内的H5页面跳转至小程序页面一般的,web-view组件的src属性指定的H5页面之间,可以正常的采用超级链接a标记对进行页面之间的条转.但是web-view页面要想通过手指触碰 ...
html实现以秒为单位倒数,跳转新的页面
<meta http-equiv="refresh" content="2;url=/.jsp"> 转载于:https://www.cnblogs. ...
Google浏览器设置跳转到新的页面
没想明白为什么Google浏览器默认设置点击新页面会覆盖原来的旧页面,难道国外人习惯不一样吗? 平时用的CTRL+左键感觉还挺方便的,用了同学的Google发现可以直接跳到新的页面,是我out了. 下 ...
vue 跳转新页面并传参
前言最近开发过程中有个新的需求,需要点击事件后跳转新的页面然后通过传参的数据展示表格. 具体来说,在一个Modal容器中,有一行字 "XXX目录",点击这个目录,就会跳转 ...
vue 移动端跳转页面_Vue移动端框架Mint UI教程-跳转新页面(四)
前三节写了vue的移动端框架的入门篇章,今天接着写,今天写的教程其实很简单,在之前的基础上,新建一个界面,并且进行跳转新页面. 1:首先,在pages底下新建一个新的页面fa.vue 在页面里面写一些 ...
selenium中webdriver跳转新页面后定位置新页面的两种方式
刚刚在写Python爬虫的时候用到了selenium , 在跳转新页面时发现无法定位新页面 , 查找不到新页面的元素一番查询后得到了解决方法 , 便记录下来备忘 , 也与大家分享 # 页面跳转代码. ...
从frame跳转到一个新的页面
要实现功能:default.aspx中当Sessions("userid")没有值时,跳转到一个新的页面login.asdpx. 如果在defalult页面里直接写Response ...

按下鼠标中键跳转新的页面

按下鼠标中键跳转新的页面相关推荐

最新文章

热门文章