VUE2的事件修饰符有.stop,.prevent,.capture,.self,.once,.passive

1. stop

测试代码如下

<style media="screen">
      .container{
        width:300px;
        height:300px;
        background-color: red;
      }
      .items{
        width:200px;
        height:200px;
        background-color:green;
      }
      .subitems{
        width:100px;
        height:100px;
        background-color:blue;
      }
    </style>
    <div id="app">
      <div class="container" @click="containerClick()">
        <div class="items" @click="itemsClick()">
          <div class="subitems" @click="subitemsClick()">
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      var vm = new Vue({
        el:"#app",
        methods:{
          containerClick(){
            console.log("container clicked");
          },
          itemsClick(){
            console.log("items clicked");
          },
          subitemsClick(){
            console.log("subitems clicked");
          },
        },
      });

    </script>

点击下图1-1中的蓝色区域,可以发现container,items,subitems的click事件均被触发了

现在我们给items的click事件加上stop修饰符,即修改代码如下:

<div class="container" @click="containerClick()">
        <div class="items" @click.stop="itemsClick()">
          <div class="subitems" @click="subitemsClick()">
          </div>
        </div>
      </div>

点击图中蓝色区域结果如下1-2所示:

可以看到点击事件在items这里终止了,不再继续向父元素传递了

2. prevent

链接:https://blog.csdn.net/yang1393214887/article/details/104340630

3. capture

将上述**[1. stop]中的测试代码**作如下修改:

<div class="container" @click="containerClick()">
        <div class="items" @click.capture="itemsClick()">
          <div class="subitems" @click="subitemsClick()">
          </div>
        </div>
      </div>

点击图中的蓝色区域,结果如图3-1所示:

可看到点击事件的触发顺序是: 绿色区域->蓝色区域->红色区域

4. self

将上述**[1. stop]中的测试代码**作如下修改:

<div class="container" @click="containerClick()">
        <div class="items" @click.self="itemsClick()">
          <div class="subitems" @click="subitemsClick()">
          </div>
        </div>
      </div>

点击蓝色区域效果如图4-1所示:

结果绿色区域被跳过了
再次点击绿色区域,结果如图4-2所示:

绿色区域和红色区域的事件被依次触发

5. once

将上述**[1. stop]中的测试代码**作如下修改:

  <div class="items" @click.once="itemsClick()">
          <div class="subitems" @click="subitemsClick()">
          </div>
        </div>

多次点击图中蓝色区域,结果如图5-1所示:

绿色区域事件只被触发了依次,然后就再没被触发过

6. passive

passive和prevent修饰符的对比:https://www.jianshu.com/p/b12d0d3ad4c1