- vue阻止事件冒泡 兩種方法：
- 使用@click.stop = "show()"
- 方法里面寫(xiě)e.stopPropagation()
show: function (e) {
alert("this is 3");
e.stopPropagation(); //阻止
}
<!--阻止事件默認(rèn)方法-->
<button @click.prevent.stop="show()">text</button>
- 關(guān)于@click.stop和@click.prevent
<div id="app">
<div v-on:click="dodo">
<button v-on:click="doThis">阻止單擊事件繼續(xù)傳播</button>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
name: "Vue.js"
},
methods: {
doThis: function () {
alert("noclick");
},
dodo: function () {
alert("dodo");
}
}
});
</script>
//將會(huì)先彈出“noclick”,再?gòu)棾觥癲odo”。
<div id="app">
<div v-on:click="dodo">
<button v-on:click.stop="doThis">阻止單擊事件繼續(xù)傳播</button>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
name: "Vue.js"
},
methods: {
doThis: function () {
alert("noclick");
},
dodo: function () {
alert("dodo");
}
}
});
</script>
//只彈出“noclick”
<a @click.prevent="test4">百度一下</a> //阻止a標(biāo)簽跳轉(zhuǎn)损谦，僅執(zhí)行函數(shù)test4
<form action="/xxx" @submit.prevent="test5"> //阻止表單提交，僅執(zhí)行函數(shù)test5
<input type="submit" value="注冊(cè)">
</form>
- 按鍵修飾符
- 栗子： 按下enter時(shí)照捡，執(zhí)行的函數(shù)
<input type="text" @keyup.enter="test7">
methods: {
test7 (event) {
console.log(event.keyCode)
alert(event.target.value)
}
}
