前言

当a标签悬浮时浏览器左下角会出现链接地址，为了隐藏链接地址，除了使用用点击事件代替以外，我们还可以一次性解决页面所有a标签悬浮出现链接的问题。

mounted() {this.deleteMsg();
},
methods: {deleteMsg() {$("body").on('mouseover', 'a', function(e) {let $link = $(this)let href = $link.attr('href') || $link.data("href");// console.log($link, href)$link.off('click.chrome');$link.on('click.chrome', function() {window.location.href = href;}).attr('data-href', href).css({cursor: 'pointer'}).removeAttr('href');})}
}

最后附上点击事件处理方法


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>如何隐藏鼠标放在A标签上时浏览器左下角显示的跳转界面地址</title>
<body><a href="javascript:;" οnclick="redirect($(this))" val="http://www.baidu.com">A标签跳转</a></body>
<script charset="utf-8" src="jquery-min.js"></script>
<script>/*** 跳转*/function redirect(options) {var url = options.attr('val');window.location.href = url;}
</script>
</html>

以上仅供学习参考

Vue.js学习笔记（三）：隐藏a标签鼠标悬浮状态下浏览器左下角出现的链接地址相关推荐

Vue.js 学习笔记三，一些基础指令，v-bind,v-on
在笔记二的基础上继续写 v-bind指令,为属性绑定数据 <div v-html="msg2" v-bind:title ...
Vue.js 学习笔记四用一，二，三的知识做个跑马灯
做个简单的跑马灯效果页面定义2个按钮,绑定2个方法. <div id="divApp"><input type="button" value ...
Vue.js 学习笔记二，一些输出指令
Vue的一些输出指令 {{字段}},v-text指令,v-html指令 <html> <head><meta name="viewport" cont ...
Vue.js学习笔记 2022 04 17
Vue.js学习笔记 1 Vue.js基础 Vue.js介绍 vuejs 渐进式 JavaScript 框架 Vue.js 如何应用 1 在普通html项目中,引入VUE.JS Hb 的项目生成的 ...
Vue.js 学习笔记五常用的事件修饰符
介绍几个常用的事件修饰符直接上代码 <div id="divApp"><div class="divColor" v-on:click=&q ...
Vue.js 学习笔记十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...
Vue.js 学习笔记九 v-if和v-show
<p v-if="flag">v-if</p><p v-show="flag">v-show</p> flag是 ...
Vue.js 学习笔记六 v-model 双向绑定数据
之前说的v-bind指令,可以绑定数据,但是是单向的,从model向view绑定,下面介绍v-model,可以双向绑定数据 <div id="divApp"><p ...
遇见 vue.js --------阿文的vue.js学习笔记（8 —1）------- 列表渲染
** 新学习新征程,我们一起踏上学习 vue.js的新长征遇见 vue.js --------阿文的vue.js学习笔记(1)-----初识vue.js 遇见 vue.js --------阿文的v ...

Vue.js学习笔记（三）：隐藏a标签鼠标悬浮状态下浏览器左下角出现的链接地址

前言

Vue.js学习笔记（三）：隐藏a标签鼠标悬浮状态下浏览器左下角出现的链接地址相关推荐

最新文章

热门文章