阻止事件冒泡和阻止默认提交事件
<script>
window.onload = function () {
var vm = new Vue({
el:'.box',
methods: {
// 监听父标签
fnFather: function () {
alert('fnFather');
},
// 监听子标签
fnSon: function () {
alert('fnSon')
},
// 表单
fnSubmit: function () {
alert('fnSubmit');
}
}
});
}
</script>
<body>
<div class="box">
<!-- 02:阻止默认提交事件 -->
<!-- @submit.prevent -->
<!-- 阻止组合事件@submit.prevent.stop <了解> -->
<form @submit.prevent='fnSubmit'>
<input type="text" name='user_name'>
<input type="submit" value='提交'>
</form>
<!-- 01:阻止事件冒泡 -->
<div @click='fnFather' class="father" style="background-color:red">
父标签
<div @click.stop='fnSon' class="son" style="background-color:green">
子标签
</div>
</div>
</div>
</body>