代码
提交代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.container{
height: 400px;
overflow-x: auto;
flex: 1;
}
.container div{
height: 20px;
}
</style>
<body>
<div id="app">
<!-- stop 案例 -->
<div @click="clickTargetContainer">
<button @click.stop="clickTargetA">点我 stop 案例</button>
<button @click="clickTargetA">点我 无 stop 修饰</button>
</div>
<!-- submit.prevent 案例 -->
<form method="get" action="/" @submit.prevent="submit">
<button type="submit">点我提交表单</button>
</form>
<form method="get" action="https://www.baidu.com" @submit="submit">
<button type="submit">点我提交表单</button>
</form>
<!-- capture 案例 -->
<div v-on:click.capture="capture">
<button @click.stop="clickTargetA">点我 capture 案例</button>
</div>
<!-- self 案例 -->
<div @click.self="clickTargetContainer" style="padding: 20px;border: 1px solid #cccccc;">
<button @click="clickTargetA">点我 self 案例</button>
</div>
<!-- once 案例 -->
<div>
<button @click.once="clickTargetA">点我 once 案例</button>
</div>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
methods: {
clickTargetContainer() {
alert('父级容器点击事件触发')
},
clickTargetA() {
alert('按钮标签点击事件触发')
},
submit() {
alert('提交表单了')
},
capture() {
alert('虽然你点击的是内部元素，但是我先触发！')
}
}
})
</script>
</html>
运行结果