事件对象、事件冒泡、默认行为

事件对象、事件冒泡、默认行为

事件对象

<div id="box">
    <input type="button" value="按钮" @click="show($event)"> 
</div>
<script type="text/javascript">
    window.onload = function(){
        var vm = new Vue({
            el:'#box',
            methods:{
                show:function(event){
                    console.log(event); //event这个就是事件对象了
                }
            }
        });
    }
</script>

事件冒泡

<div id="box">
    <div @click="show1()">
        <input type="button" value="按钮" @click="show()"> 
    </div>
</div>
 <script type="text/javascript">
    window.onload = function(){
        var vm = new Vue({
            el:'#box',
            methods:{
                show:function(){
                    alert(1);
                },
                show1:function(){
                    alert(2);
                }
            }
        });
    }//点击按钮会执行show、show1方法，一次弹出1，2
</script>

• 利用event对象event.cancelBubble = true 阻止冒泡

<div id="box">
    <div @click="show1()">
        <input type="button" value="按钮" @click="show($event)"> 
    </div>
</div>
<script type="text/javascript">
    window.onload = function(){
        var vm = new Vue({
            el:'#box',
            methods:{
                show:function(event){
                    alert(1);
                    event.cancelBubble = true;
                },
                show1:function(){
                    alert(2);
                }
            }
        });
    }
</script>

• 利用vue的方法阻止冒泡：给HTML元素绑定click事件的时候，改为@click.stop="show()"

<div id="box">
    <div @click="show1()">
        <input type="button" value="按钮" @click.stop="show()"> 
    </div>
</div>
<script type="text/javascript">
    window.onload = function(){
        var vm = new Vue({
            el:'#box',
            methods:{
                show:function(event){
                    alert(1);
                    //event.cancelBubble = true;
                },
                show1:function(){
                    alert(2);
                }
            }
        });
    }
</script>

• 默认行为，比如contextmenu右键菜单

<div id="box">
    <input type="button" value="按钮" @contextmenu="show()"> 
    <input type="button" value="按钮1" @contextmenu.prevent="show1()"> 

    <p>//按钮右击点下去会依次出现 弹窗 1， 还有右击的默认菜单</p>
    <p>//按钮1右击只出现 弹窗 2</p>
</div>
<script type="text/javascript">
    window.onload = function(){
        var vm = new Vue({
            el:'#box',
            methods:{
                show:function(){
                    alert(1);
                },
                show1:function(){
                    alert(2);
                }
            }
        });
    }
</script>

• js事件event.preventDefault()与event.stopPropagation()用法区别

  • event.preventDefault()通知Web浏览器不要执行与事件关联的默认动作(如果存在这样的动作)
  • event.stopPropagation()停止事件的传播，阻止被分派到其他Document节点
  • return false 这个方法会同时阻止事件冒泡也会阻止默认事件

<a href="http://www.baidu.com" target="_blank"></a>
			
//1. 不阻止事件冒泡和默认事件			
$(".box1").click(function(){
	console.log("1")//不阻止事件冒泡会打印1，页面跳转;		
});
//2. 阻止冒泡
$(".box1 a").click(function(event){
	event.stopPropagation();//不会打印1，但是页面会跳转；	
});
$(".box1").click(function(){
	console.log("1")				
});
//3. 阻止默认事件
$(".box1 a").click(function(event){			
	event.preventDefault();//页面不会跳转，但是会打印出1，
});		
$(".box1").click(function(){
	console.log("1")；				
});
//4. 第四种情况
$(".box1").click(function(){
	console.log("1")
});			
$(".box1 a").click(function(event){
	event.stopPropagation();//阻止冒泡
	event.preventDefault() //阻止默认事件，页面不会跳转，也不会打印出1
})
//5. 第五种情况
$(".box1").click(function(){
	console.log("1")				
});									
$(".box1 a").click(function(event){
	return false;  //页面不会跳转，也不会打印出1，等于同时调用了event.stopPropagation()和event.preventDefault()
});