zoukankan      html  css  js  c++  java
  • 33、vue中的事件修饰符.stop、.prevent、.self、.capture、.once

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>事件修饰符</title>
        <script src="../lib/vue.js"></script>
        <style>
            .app{
                 200px;
                height: 200px;
                background: red;
            }
        </style>
    </head>
    <body>
        <!-- <div class="app" @click.capture="outClick"> -->
            <!-- 使用.capture实现捕获触发事件的机制,即从外部事件开始执行 -->
        <div class="app" @click.self="outClick">
            <!-- 使用.self实现只有点击当前元素才会触发事件处理函数-->
            <input type="button" value="按钮1" @click.stop="innerClick">
            <!-- 使用.stop阻止事件的冒泡行为 -->
            <input type="button" value="按钮2" @click.once="innerClick">
            <!-- 使用.once实现事件的触发次数为一次 -->
            <a href="https://www.baidu.com/" @click.prevent.stop="aClick">有事找百度</a>
            <!-- 使用.prevent阻止事件的默认行为 -->
        </div>
        <script>
            var vm = new Vue({
                el:".app",
                methods:{
                    outClick(){
                        alert('我是外面的事件');
                    },
                    innerClick(){
                        alert('我是内部的事件');
                    },
                    aClick(){
                        alert('我是超链接的事件');
                    }
                }
            })
        </script>
    </body>
    </html>
  • 相关阅读:
    %2d
    将块中的文字设置成属性,即实现块中文字可拖动的功能
    获得块参照的插入点方法
    排序
    将几个实体对象变成一个块
    对克隆实体的类型转换
    对实体的克隆
    递归-顺序输出任意正整数各位
    递归-汉诺塔
    递归-最大公约数
  • 原文地址:https://www.cnblogs.com/xlfdqf/p/11343906.html
Copyright © 2011-2022 走看看