vue(一) 事件深入
阿新 • • 發佈：2017-07-06
tro col 行為 func inpu fun window can str
一、事件對象：
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>
四、鍵盤
[email protected] $event ev.keyCode
[email protected]
五、常用鍵
回車 :
(1)@keyup.13
(2)@keyup.enter
vue(一) 事件深入