【VUE事件修饰符self capture stop】

最新推荐文章于 2024-09-30 16:19:08 发布

历目

最新推荐文章于 2024-09-30 16:19:08 发布

阅读量237

点赞数

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/limuzhixing/article/details/126256145

版权

VUE 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

VUE事件修饰符self capture stop

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>
  <style>
    .d1{
      width: 400px;height: 400px;
      background-color: aqua;
    }
    .d2{
      width: 300px;height: 300px;
      background-color:red;
    }
    .d3{
      width: 200px;height: 200px;
      background-color:rgb(208, 255, 0);
    }
    .d4{
      width: 100px;height: 100px;
      background-color:rgb(25, 167, 25);
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- self只有作用于他自身才会执行,没主动触发跳过事件不执行 -->
    <div class="d1" @click.self="alert(1)">
      div1
      <div class="d2"  @click.capture="alert(2)">
        div2
        <!-- 注意正常的冒泡是先执行被点击的目标对象，再从目标对象位置开始向外冒泡执行 -->
        <!-- 所以如果点击2是不会执行内层的capture -->
        <div class="d3"  @click.capture="alert(3)">
          div3
          <!-- 点击capture由外向内执行capture，点击4会先执行3再4
          然而点击3是不会执行4的 -->
          <!-- 此外stop是一道屏障，只会执行到该屏障为止，屏障后续不执行 -->
          <!-- capture优先于stop执行，从外向内执行 -->
          <div class="d4"  @click.stop="alert(4)">div4</div>
        </div>
      </div>
    </div>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
      },
     methods: {
       alert(i){
         alert(i);
       }
     },
    })
  </script>
</body>
</html>