zoukankan      html  css  js  c++  java
  • 027——VUE中事件修饰符:stop prevent self capture

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>修饰符:self capture stop prevent的使用</title>
        <script type="text/javascript" src="vue.js"></script>
    </head>
    <body>
    <div id="demo">
        <!--第一种情况-->
        <!--<div @click="divEven" style="border:1px #188eee solid;">-->
            <!--<a href="www.baidu.com" @click="aEven">百度链接</a>-->
        <!--</div>-->
        <!--stop的使用:阻止事件冒泡的发生-->
        <!--<div @click="divEven" style="border:1px #188eee solid;">-->
            <!--<a href="www.baidu.com" @click.stop="aEven">百度链接</a>-->
        <!--</div>-->
    
        <!--prevent的使用:阻止默认事件的发生-->
        <!--<div @click="divEven" style="border:1px #188eee solid;">-->
            <!--<a href="www.baidu.com" @click.stop.prevent="aEven">百度链接</a>-->
        <!--</div>-->
    
        <!--self的使用:只有点击他本身时才去执行,点击他的子元素不去执行-->
        <!--<div @click.self="divEven" style="border:1px #188eee solid;">-->
            <!--<a href="www.baidu.com" @click.prevent="aEven">百度链接</a>-->
        <!--</div>-->
    
        <!--capture的使用:触发捕获事件()先执行大盒子的事件,起执行小盒子的事件-->
        <div @click.capture="divEven" style="border:1px #188eee solid;">
            <a href="www.baidu.com" @click.prevent="aEven">百度链接</a>
        </div>
    </div>
    <script>
        new Vue({
            el:"#demo",
            methods:{
                divEven(){
                    alert("我是div的事件");
                },
                aEven(){
                    alert("我是a链接事件");
                }
            }
        });
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    常用录屏工具
    python常用工具库介绍
    修改anaconda3 jupyter notebook 默认路径
    【转载】面试那些事【三】
    【转载】面试那些事【二】
    【转载】面试那些事【一】
    Myeclipse 激活代码 8.6以前的版本
    ddd
    Java 算法
    Java 水仙花数
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/8116264.html
Copyright © 2011-2022 走看看