码迷,mamicode.com
首页 > 其他好文 > 详细

vue(一) 事件深入

时间:2017-07-06 18:57:56      阅读:336      评论:0      收藏:0      [点我收藏+]

标签:span   strong   can   nbsp   box   default   class   回车   context   

一、事件对象:

click="show($event)"

二、事件冒泡:

  阻止冒泡:(1) ev.cancelBubble=true;  

 

  <script>
        window.onload=function(){
            new Vue({
                el:"#box",
                data:{},
                methods:{
                    show:function(ev){
                        ev.cancelBubble=ture;                
                    },
                    show2:function(){
                        alert(2);
                    }
                },                
            })
        }
    </script>
<div id=box>
    <div @click="show2()">
        <input type="button" value="按钮" @click="show($even)">      
    </div>    
</div>    

   (2) @click.stop(推荐)

    <script>
        window.onload=function(){
            new Vue({
                el:"#box",
                data:{},
                methods:{
                    show:function(ev){                       
                        alert(1);         
                    },
                    show2:function(){
                        alert(2);
                    }
                },                
            })
        }
    </script>
<div id=box>
    <div @click="show2()"><input type="button" value="按钮" @click.stop="show()"></div>    
</div>    

三、默认事件:contextmenu(右键)

阻止默认行为:(1) ev.preventDefault;     

    <script>
        window.onload=function(){
            new Vue({
                el:"#box",
                data:{},
                methods:{
                    show:function(ev){
                        alert(1);
                        ev.preventDefault();
                    }
                },                
            })
        }
    </script>

</head>
<body>
<div id=box>
    <div @click="show2()">
        <input type="button" value="按钮" @contextmenu="show($event)">   
    </div>    
</div>    

  (2) @contextmenu.prevent(推荐)

    <script>
        window.onload=function(){
            new Vue({
                el:"#box",
                data:{},
                methods:{
                    show:function(ev){
                        alert(1);                      
                    }
                },                
            })
        }
    </script>

</head>
<body>
<div id=box>
    <div @click="show2()">
        <input type="button" value="按钮" @contextmenu.prevent="show()">   
    </div>    
</div>    
</body>

 四、键盘

 

  @keydown      $event        ev.keyCode

 

  @keyup        

 五、常用键 

  回车 :

  (1)@keyup.13

  (2)@keyup.enter

 

 

vue(一) 事件深入

标签:span   strong   can   nbsp   box   default   class   回车   context   

原文地址:http://www.cnblogs.com/sun927/p/7127317.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!