就是两个框框重叠,通过事件修饰符来决定触发哪个事件.

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    10.     <style>
    11.         .inner {
    12.             height: 150px;
    13.             background: blue;
    14.             width: 300px;
    15.         }
    16.         .outer {
    17.             padding-top: 20px;
    18.             padding-left: 20px;
    19.             height: 300px;
    20.             width: 400px;
    21.             background:brown;
    22.         }
    23.     </style>
    24. </head>
    26. <body>
    28.     <div id="app">
    30.         <!-- 默认会先调用里面的方法,在调用外面的方法,从里到外 .stop 阻止冒泡  -->
    31.         <!-- <div class="inner" @click="innerclick">
    32.             <input type="button" value="按钮" @click.stop="btnclick">
    33.         </div> -->
    35.         <!-- .capture 使用事件捕获,从外到里 -->
    36.         <!-- <div class="inner" @click.capture="innerclick">
    37.             <input type="button" value="按钮" @click="btnclick">
    38.         </div> -->
    40.         <!-- .self 实现只有点击自己才会执行 -->
    41.         <!-- <div class="inner" @click.self="innerclick">
    42.             <input type="button" value="按钮" @click="btnclick">
    43.         </div> -->
    45.         <!-- .prevent 阻止默认行为 -->
    46.         <a href="http://www.baidu.com" @click.prevent="linkbaidu">跳转至百度</a>
    48.         <!-- .prevent 阻止默认行为 .once 只会执行一次 可以串联使用-->
    49.         <a href="http://www.baidu.com" @click.prevent.once="linkbaidu">跳转至百度</a>
    52.         <!-- 演示.stop 跟 .self的区别  .self只会阻止自己,并不会阻止事件冒泡-->
    53.         <div class="outer" @click="outerclick">
    54.             <div class="inner" @click.self="innerclick">
    55.                 <input type="button" value="按钮" @click="btnclick">
    56.             </div>
    57.         </div>
    59.         <br>
    61.         <!-- 演示.stop 跟 .self的区别  .stop会阻止事件冒泡-->
    62.         <div class="outer" @click="outerclick">
    63.             <div class="inner" @click="innerclick">
    64.                 <input type="button" value="按钮" @click.stop="btnclick">
    65.             </div>
    66.         </div>
    67.     </div>
    69.     <script>
    70.         var vm = new Vue({
    71.             el: '#app',
    72.             data: {},
    73.             methods: {
    74.                 innerclick() {
    75.                     console.log("我是inner")
    76.                 },
    77.                 btnclick() {
    78.                     console.log("我是按钮")
    79.                 },
    80.                 linkbaidu() {
    81.                     console.log("跳转至百度")
    82.                 },
    83.                 outerclick(){
    84.                     console.log("我是outer")
    85.                 }
    86.             }
    87.         });
    88.     </script>
    89. </body>
    91. </html>

    1.gif