Vue事件修饰符stop,self,capture的阻塞冒泡的详细说明

最新推荐文章于 2022-08-15 17:34:41 发布

lal95828

最新推荐文章于 2022-08-15 17:34:41 发布

阅读量714

点赞数 2

分类专栏： vue 阻塞冒泡文章标签： vue

本文链接：https://blog.csdn.net/lal95828/article/details/105145104

版权

vue 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

阻塞

1 篇文章 0 订阅

订阅专栏

冒泡

1 篇文章 0 订阅

订阅专栏

学过js的大概都应该知道，阻塞，冒泡之间的关系和区别。通常情况下，事件触发机制的顺序是：捕获阶段 ===》目标阶段 ===》冒泡阶段。通俗的说，就是在嵌套标签元素的时候，每个标签元素都有点击事件，那么点击子标签的时候，父子孙爷上的点击事件的触发顺序。
先把实验代码放上去

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bubble event</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <style type="text/css">
        body{margin:0;}
        .one{
            width:500px;
            height:300px;
            background:rgb(255,0,0);
        }
        .two{
            width:400px;
            height:260px;
            background:rgb(255,50,50);
        }
        .three{
            width:300px;
            height:240px;
            background:rgb(255,100,100);
        }
        .four{
            width:200px;
            height:200px;
            background:rgb(255,150,150);
        }
    </style>
</head>
<body>
     <div id="app">
          <div class='one' @click="func('one')">
            1
            <div class='two'  @click="func('two')">
              2
              <div class='three'  @click="func('three')">
                3
                <div class='four'  @click="func('four')">
                  4
                </div>
              </div>
            </div>
          </div>
     </div>
    <script>


        var vmob = new Vue({
          el:"#app",
        	    methods: {
                 func(data){
                   console.log("触发了"+data)
                 }
        	    },
        })
    </script>
</body>
</html>

现在主要修改的地方就是，在4个@click后面添加修饰符来说明，stop和self，capture的区别。
这个三个修饰符，对于点击自身的时候，自己的事件都会触发，只是触发时机不同。

stop：是阻值冒泡，意思就是，事件触发行为不在向后传递，为什么不是说不向父组件传递呢？是因为上面已经提到，事件触发的顺序是：捕获阶段 ===》目标阶段 ===》冒泡阶段。如果父组件的排序是在捕获阶段，那父组件还是会触发。比如这种情况

<div id="app">
          <div class='one' @click.capture="func('one')">
            1
            <div class='two'  @click="func('two')">
              2
              <div class='three'  @click.stop="func('three')">
                3
                <div class='four'  @click="func('four')">
                  4
                </div>
              </div>
            </div>
          </div>
     </div>

在这里插入图片描述
self：意思就是，不会被别人的触发的点击事件触发，只会是自己被点击的时候被触发。但重点是，冒泡事件，只是在遇到带有self修饰符的div时，不会去触发它，但是冒泡还是会向下传递。

<div id="app">
          <div class='one' @click.capture="func('one')">
            1
            <div class='two'  @click="func('two')">
              2
              <div class='three'  @click.self="func('three')">
                3
                <div class='four'  @click="func('four')">
                  4
                </div>
              </div>
            </div>
          </div>
     </div>

在这里插入图片描述

capture：触发时机变为捕获。

<div id="app">
          <div class='one' @click="func('one')">
            1
            <div class='two'  @click.capture="func('two')">
              2
              <div class='three'  @click.capture="func('three')">
                3
                <div class='four'  @click="func('four')">
                  4
                </div>
              </div>
            </div>
          </div>
     </div>

在这里插入图片描述

总结：capture类似于权重，都有capture修饰时，父亲权重更大，触发越靠前。
self，类似于特例，不干扰别人的事情，只是别人也别想触发自己。stop就是不在将事件触发往下传递。

lal95828

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue事件修饰符stop,self,capture的阻塞冒泡的详细说明

学过js的大概都应该知道，阻塞，冒泡之间的关系和区别。通常情况下，事件触发机制的顺序是：捕获阶段 ===》目标阶段 ===》冒泡阶段。通俗的说，就是在嵌套标签元素的时候，每个标签元素都有点击事件，那么点击子标签的时候，父子孙爷上的点击事件的触发顺序。先把实验代码放上去<!DOCTYPE html><html><head> <meta cha...
复制链接

扫一扫