Vue 中使用 @click.prevent 发现的小问题
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<a href="http://www.baidu.com" @click.prevent="stopbaidu()">go</a>
<a href="http://www.qq.com" onclick="stopqq()">stop</a>
</div>
</body>
<script>
function stopqq() {
console.log(11);
return false;
}
var app = new Vue({
el: '#app',
data: {
},
methods: {
stopbaidu: function () {
console.log(1);
}
}
});
</script>
</html>
@click.prevent可以阻止a标签跳转到百度。stopqq(),不能阻止跳转到QQ网站。
在js中return false的作用一般是用来取消默认动作的。比如你单击一个链接除了触发你的 onclick事件(如果你指定的话)以外还要触发一个默认事件就是执行页面的跳转。所以如果 你想取消对象的默认动作就可以return false。
解决办法:
<a href="http://www.qq.com" onclick="return stopqq()">stop</a>