vue 事件深入
Posted 小太阳wy927
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 事件深入相关的知识，希望对你有一定的参考价值。
一、事件对象：
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 事件深入的主要内容，如果未能解决你的问题，请参考以下文章