冒泡事件:事件的响应像水泡一样上升至最顶级对象。
js阻止冒泡:event.stopPropagation();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue基本使用</title>
<style>
[v-cloak] {
display: none;
}
</style>
<!-- 引入vue.js -->
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div>{{num}}</div>
<!-- 事件定义到了handler0,但点击“点击3”仍然可以num++ -->
<div v-on:click='handler0'>
<div v-on:click='handler1'>
<button @click='handler2'>点击3</button>
</div>
</div>
</div>
<script>
var vue = new Vue({
// 元素的挂载位置(值可以是Css选择器或DOM元素)
el: '#app',
// 模型数据(值是一个对象)
data: {
num: 0
},
methods: {
handler0: function () {
this.num++;
},
handler1: function (event) {
//event.stopPropagation();
},
handler2: function (event) {
}
}
});
</script>
</body>
</html>
Vue中用v-on:click.stop='handler'阻止冒泡
<div v-on:click='handler0'>
<div v-on:click.stop='handler1'>
<button @click='handler2'>点击3</button>
</div>
</div>
handler1: function (event) {
//event.stopPropagation();
},
默认行为: 用户某些动作后,标签自动发生的行为 在HTML标签中,有些元素拥有自己的默认行为,如:1、 超级链接标签:单击后可以实现跳转到指定url页面 ; 2、submit提交按钮:单击后可以提交表单数据到指定页面中
取消默认事件:event.preventDefault();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue基本使用</title>
<!-- 引入vue.js -->
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<a href="http://www.baidu.com" v-on:click='handler3'>百度</a>
</div>
<script>
var vue = new Vue({
// 元素的挂载位置(值可以是Css选择器或DOM元素)
el: '#app',
// 模型数据(值是一个对象)
data: {
},
methods: {
handler3: function (event) {
event.preventDefault();
}
}
});
</script>
</body>
</html>
Vue中阻止默认行为:v-on:click.prevent='handler'
<div id="app">
<a href="http://www.baidu.com" v-on:click.prevent='handler3'>百度</a>
</div>
methods: {
handler3: function (event) {
}
}