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>

  

posted @ 2017-12-26 08:17  生如逆旅,一苇以航  阅读(7890)  评论(0编辑  收藏  举报