Vue的事件修饰符-优快云博客

本文链接：https://blog.youkuaiyun.com/zhuyvhui/article/details/126549627

本文详细介绍了Vue.js中各种事件修饰符的功能和用法，包括.stop、.prevent、.once、.capture和.self等，通过示例展示了如何在实际项目中应用这些修饰符来精确控制事件的行为。

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

Vue的事件修饰符

.stop

阻止冒泡

<body>
    <div id="app">
     <div style="width: 200px;height: 200px;background-color:red" @click="fun1">
        <div style="width: 100px;height: 100px;background-color:rgb(238, 158, 105)"                  @click.stop="fun2">
        //意义：阻止冒泡  。正常情况下触发子事件 也会触发父事件，（而.stop就可以阻止父事件的执行）
          
        </div>
    </div>

    </div>
</body>

<script type="text/javascript">
    var vm=new Vue({
       el:"#app",
       data:{
         "str1":"aaa",
       },
       //methods  vue中对于绑定事件函数的定义，可以同时定义多个函数
       methods:{
         fun1(){
            alert("触发外从div");
         },
         fun2(){
            alert("触发内侧div");
         }

       }
    })

   </script>

.prevent

阻止超链接的跳转

<body>
    <div id="app">
    <a href="http://www.baidu.com" @click="fun1">点击</a>
    <a href="http://www.baidu.com" @click.prevent="fun2">点击式2</a>
                                   //阻止超链接的跳转（.prevent）
    </div>
</body>
<script type="text/javascript">
    var vm=new Vue({
       el:"#app",
       data:{
         "str1":"aaa"
       },
       //methods  vue中对于绑定事件函数的定义，可以同时定义多个函数
       methods:{
         fun1(){
            alert("超链接");
         },
         fun2(){
            alert("不会跳超链接");
         }

       }
    })

   </script>

.once

该修饰符与.prevent使用。只触发一次事件处理函数

<body>
    <div id="app">
    //不跳转链接
    <a href="http://www.baidu.com" @click.prevent="fun1">点击</a>
    //第一次不跳转链接，第二次跳转 （只阻止一次）
    <a href="http://www.baidu.com" @click.prevent.once="fun2">点击式2</a>
                                 
    </div>
</body>
<script type="text/javascript">
    var vm=new Vue({
       el:"#app",
       data:{
         "str1":"aaa"
       },
       //methods  vue中对于绑定事件函数的定义，可以同时定义多个函数
       methods:{
         fun1(){
            alert("超链接");
         },
         fun2(){
            alert("不会跳超链接");
         }

       }
    })

   </script>

.capture

触发内部事件的时候总是先从.capture修饰符开始（触发外层事件时候除外）

<body>
    <div id="app">
     <div style="width: 200px;height: 200px;background-color:red" @click.capture="fun1">
        <div style="width: 100px;height: 100px;background-color:rgb(238, 158, 105)" @click="fun2">
          //单击内部事件的时候也会先执行外部事件
        </div>
    </div>

    </div>
</body>
<script type="text/javascript">
    var vm=new Vue({
       el:"#app",
       data:{
         "str1":"aaa"
       },
       //methods  vue中对于绑定事件函数的定义，可以同时定义多个函数
       methods:{
         fun1(){
            alert("触发外从div");
         },
         fun2(){
            alert("触发内侧div");
         }

       }
    })

   </script>

.self

和.stop不同。这个是阻止自己执行（当触发最内侧事件时，到.self时跳过他继续执行其他的）

<body>
    <div id="app">
     <div style="width: 200px;height: 200px;background-color:red" @click="fun1">
        <div style="width: 100px;height: 100px;background-color:rgb(238, 158, 105)" @click.self="fun2">
              <div style="width: 80px;height: 50px;background-color:rgb(105, 178, 238)" @click="fun3">
              //单击fun3时执行 第三层和第一层
          
         </div>

        </div>
    </div>

    </div>
</body>
<script type="text/javascript">
        function fun(){
            alert("alksmfk");
        }

    var vm=new Vue({
       el:"#app",
       data:{
         "str1":"aaa"
       },
       //methods  vue中对于绑定事件函数的定义，可以同时定义多个函数
       methods:{
         fun1(){
            alert("触发外从div");
         },
         fun2(){
            alert("触发内侧div");
         },
         fun3(){
            alert("触发内内侧div");
         }

       }
    })

   </script>