vue2 事件修饰符

最新推荐文章于 2025-06-04 19:46:09 发布

融图

最新推荐文章于 2025-06-04 19:46:09 发布

阅读量301

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue 事件修饰符

本文链接：https://blog.youkuaiyun.com/xiangyang_csii/article/details/88316216

vue 专栏收录该内容

6 篇文章

订阅专栏

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 掠夺前一个事件响应的优先级
.self 只当事件在该元素本身触发时触发回调，只与关联的对象有关，与前后无关
.once事件只触发一次

.capture的优先级先于.stop,会先进行.capture中的事件才会进入到stop
div @click.capture="" id=“1”
div @click="" id= “2”
div @click.stop="" id=“3”
当id3开始准备响应时，id1会夺取优先级点击id3 响应顺序id1–>id3 stop停止

@click.stop 事件冒泡触发停止于此

<a href = " " @click.prevent 点击只触发事件，不会发生跳转

@click.capture 先于前一个点击事件响应
按钮点击，capture添加的事件先发出响应，然后才是按钮的事件响应

@click.self 只是本身不参与冒泡响应

@click.once 只触发一次，可搭配使用

@click.self.once 与顺序无关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="./lib/vue.min.js"></script>

    <style>
      .inner{
          height: 150px;
          background-color: cadetblue;
      }

    </style>
</head>
<body>
    <div id="app" @click="divHandler">

        <div class="inner" @click.capture="div1Handler">
            <input type="button" value="点点1" @click="btnHandler">

            <a href="http://www.baidu.com" @click.prevent="btnHandler">百度一下</a>
        
            <input type="button" value="点点2" @click="btnHandler">
        </div>

        <div class="inner" @click.stop="div1Handler">
          
                <input type="button" value="点点3" @click="btnHandler">
            </div>
            <div class="inner" @click.self="div1Handler">
          
                    <input type="button" value="点点4" @click="btnHandler">
                </div>
    

    </div>
    
    <script>
       var vm = new Vue({

           el:'#app',
           data:{
               msg:'123'
           },
           methods:{
              div1Handler:function(){
                   console.log('div触发了警报')
               },
              btnHandler:function(){
                console.log('btn触发了警报')
               },
               divHandler:function(){
                   console.log('老大触发了警报')
               }
           }
       })
    
    </script>

</body>
</html>