一、事件对象：
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
时间： 2024-08-24 15:49:17