vue2.0+基础知识连载（09）--- 默认事件

宇智波幽助

于 2018-01-19 12:18:47 发布

阅读量255

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue 阻止默认事件

本文链接：https://blog.youkuaiyun.com/yuzhiboyouzhu/article/details/79105391

vue 专栏收录该内容

40 篇文章

订阅专栏

本文介绍如何在Vue2.0中通过两种方法阻止默认的右键点击事件。第一种方法是在事件处理函数中使用preventDefault()方法；第二种方法是在事件修饰符中直接使用.prevent。这两种方法都能有效阻止浏览器的默认行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
    <title>vue2.0+基础知识连载（09）--- 默认事件</title>
</head>

<body>

    <h3>vue2.0+基础知识连载（09）--- 默认事件</h3>

    <div id='app'>

        <h4>点击右键触发事件方法：contextmenu()</h4>
        <hr>
        <h5>阻止默认事件方式一：</h5>
        <p><input type="button" value="按钮" @contextmenu="show($event)"></p>
        <hr>
        <h5>阻止默认事件方式二：</h5>
        <p><input type="button" value="按钮" @contextmenu.prevent="show2($event)"></p>

    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>
    <script type="text/javascript">

        var vm = new Vue({
            data: {},
            methods: {
                show: function(ev) {
                    console.log('点击了右键');
//                      return false;   //return false不能阻止默认事件
                    ev.preventDefault();    // 阻止默认事件方式一：
                },
                show2: function(ev) {
                    console.log('点击了右键');
                }
            }
        }).$mount('#app');

    </script>

</body>
</html>