vue.js事件修饰符.stop阻止单击事件冒泡

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。其中.stop就是用来阻止单击事件冒泡，用法如：
<a v-on:click.stop="doThis"></a>

下面是全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue .stop阻止冒泡</title>
</head>
<style>
    #aa {width: 150px;height: 150px;background:pink;}
    #bb {margin: 0 auto;text-align: center;width: 100px;height: 80px;background:orange;}
</style>
<body>
    <script type="text/javascript" src="vue.min.js"></script>
    <div id="app">
        <div id="aa" @click="doaa">
            <div id="bb" @click="dobb">
                <a id="cc" @click.stop="docc" href="#">点我阻止冒泡</a>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var vm=new Vue({
            el:'#app',
            data:{
            },
            methods:{
                doaa:function(){
                    alert("do aa");//点击cc部分，不发生冒泡
                },
                dobb:function(){
                    alert("do bb");//点击bb，即橙色，发生冒泡，执行函数dobb,doaa
                },
                docc:function(){
                    alert("do cc---.stop");
                }
            }
        })
    </script>
</body>
</html>

 

posted @ 2017-09-07 15:13  windowClass  阅读(2133)  评论(0)  编辑  收藏  举报