vue《三》（事件对象(event)、事件冒泡、默认行为）

1.点击事件的event(事件对象)

<div id="test">
    <input type="button" value="按钮" v-on:click="show($event)">
</div>

var vm = new Vue({
                el:'#test',
                methods:{
                    show:function(event){
                        console.log(event);
                        alert(event.clientX); //X 这里边就是原生JS
                        alert(event.clientY);//Y
                    }
                }
            });

调用函数的时候传入一个$event参数进去，函数内部可以通过这个event参数，获取鼠标点击的X点和Y点。

2.事件冒泡

代码：

div id="test2">
    <div @click="show2()">
        <input type="button" value="冒泡" @click="show()">
    </div>
</div>

var vm2 = new Vue({
                el:'#test2',
                methods:{
                    show:function(){
                        alert(1);
                    },
                    show2:function(){
                        alert(2);
                    }
                }
            });

3. 阻止冒泡

在调用函数时传入：

代码：

<div id="test3">
    <div @click="show2()">
        <input type="button" value="阻止冒泡" @click="show()">
    </div>
</div>

var vm3 = new Vue({
                el:'#test3',
                methods:{
                    show:function(){
                        alert("事件一");
                        event.cancelBubble = true;//阻止冒泡
                    },
                    show2:function(){
                        alert("事件二");
                    }
                }
            });

4.默认事件（contextmenu右键菜单）

代码： 

<div id="test4">
    <input type="button" value="默认事件" @contextmenu="show()">
</div>

var vm4 = new Vue({
                el:'#test4',
                methods:{
                    show:function(){
                        alert("事件");
                        //event.cancelBubble = true;//阻止冒泡
                    }
                }
            });

点击右键也会执行show()方法，但是执行完之后会打开右键菜单的默认行为。

阻止这种默认行为：@contextmenu.prevent="show()"

<div id="test4">
    <input type="button" value="默认事件" @contextmenu.prevent="show()">
</div>