JavaScript: Vue Firefox 中 a标签 不执行v-on:clicked点击事件里的操作
问题： Vue项目中一组
<a href="javascript:;">链接</a>添加点击事件，在Chrome浏览器中运行正常，在Firefox中不执行点击事件里的操作，直接跳转空白页面。
例如：
<a href="javascript:;" v-on:click="github_login" class="github_login">GitHub</a>
let vm = new Vue(
{
el: '#app',
methods: {
github_login: function () {
let url = '/github/login/';
axios.get(
url,{responseType:'json'}
).then(
response=>{
location.href=response.data.login_url;
}
).catch(
error=>{
console.log(error.response)
}
)
},
},
}
)
分析
一组a标签中各个标签绑定的点击事件都不同，，但是所有标签点击效果一样，所以应该不是事件代码的问题。
在Chrome中执行正常，大概是Firefox兼容的问题。这些有问题的标签的共同点是href="javascript:;"。
原因
查找一番资料后发现，Firefox和IE一般会先运行DOM绑定的事件，如果没有阻止事件冒泡，则会继续执行href属性。最后只执行的href属性中的href="javascript:;"会返回一个空值覆盖前面事件执行函数的执行结果。
解决方法
1. 在DOM绑定的事件中阻止冒泡
<a href="javascript:;" v-on:click="github_login" class="github_login">GitHub</a>
let vm = new Vue(
{
el: '#app',
methods: {
github_login: function (event) {
event.preventDefault();
let url = '/github/login/';
axios.get(
url,{responseType:'json'}
).then(
response=>{
location.href=response.data.login_url;
}
).catch(
error=>{
console.log(error.response)
}
)
},
},
}
)
2. 省略href
<a v-on:click="github_login" class="github_login">GitHub</a>
