a 标签点击事件return false,不能阻止a标签的跳转

1,054 阅读1分钟

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>