02-Vue_事件修饰符

Vue_事件修饰符

我们的事件在触发时默认是冒泡的，就是在触发内层的元素事件时，会冒泡的最外层元素的事件。有些元素还自带默认事件，例如：超链接a，表单submit等……

<!-- Style Code -->
<style type="text/css">
    .inner {
        background-color: green;
        height: 100px;
        padding: 10px;
    }
    .outer {
        height: 200px;
        padding: 10px;
        background-color: #00007f;
    }
</style>
<!-- DOM Code -->
<div id="app">
    <div class="outer">
        <div class="inner">
            <button>点击</button>
        </div>
    </div>
    <a href="http://www.baidu.com">百度一下</a>
    <br>
    <a href="http://www.baidu.com">百度一下
        <button>BTN</button>
    </a>
</div>
<!-- Script Code -->
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            inner() {
                console.log("inner() 被点击了");
            },
            outer() {
                console.log("outer() 被点击了");
            },
            btn() {
                console.log("btn() 被点击了");
            }
        }
    });
</script>

传统的方式

<div id="app">
    <div>{{num}}</div>
    <div v-on:click='handle0'>
      <button v-on:click.stop='handle1'>点击1</button>
    </div>
    <div>
      <a href="http://www.baidu.com" v-on:click.prevent='handle2'>百度</a>
    </div>
  </div>
<script type="text/javascript">
    const vm = new Vue({
      el: '#app',
      data: {
        num: 0
      },
      methods: {
        handle0: function(){
          this.num++;
        },
        handle1: function(event){
          // 阻止冒泡
          // event.stopPropagation();
        },
        handle2: function(event){
          // 阻止默认行为
          // event.preventDefault();
        }
      }
    });
  </script>

事件修饰符：

• .stop 阻止冒泡
• .prevent 阻止默认事件
• .capture 添加事件侦听器时使用事件捕获模式
• .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
• .once 事件只触发一次

stop 阻止冒泡事件修饰符

<div id="app">
    <div class="outer" @click="outer">
        <div class="inner" @click="inner">
            <button type="button" @click.stop="btn">点击</button>
        </div>
    </div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            inner() {
                console.log("inner() 被点击了");
            },
            outer() {
                console.log("outer() 被点击了");
            },
            btn() {
                console.log("btn() 被点击了");
            }
        }
    });
</script>

效果：只执行了当前（btn）元素的点击事件，stop 阻止了冒泡，所以没有冒泡给 outer 和 inner

prevent 阻止默认事件修饰符

<!-- 这样点击a链接就不会跳转了 -->
<a href="http://www.baidu.com" @click.prevent>百度一下</a>
<a href="http://www.baidu.com" @click.prevent="btn">百度一下</a>

capture 事件捕获修饰符

<div class="outer" @click.capture="outer">
    <div class="inner" @click.capture="inner">
        <button type="button" @click.capture="btn">点击</button>
    </div>
</div>

效果：点击 btn ，依次触发：outer -> inner -> btn

self 只有点击当前元素时才会触发

<div class="outer" @click="outer">
    <div class="inner" @click.self="inner">
        <button type="button" @click="btn">点击</button>
    </div>
</div>

效果：点击 btn，事件冒泡给 outer ，直接跳过 inner，因为 inner 需要被点击自身才行

once 事件只触发一次

<a href="http://www.baidu.com" @click.prevent.once="btn">百度一下</a>