代碼
提交代碼
<!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">點(diǎn)我 stop 案例</button>
<button @click="clickTargetA">點(diǎn)我 無 stop 修飾</button>
</div>
<!-- submit.prevent 案例 -->
<form method="get" action="/" @submit.prevent="submit">
<button type="submit">點(diǎn)我提交表單</button>
</form>
<form method="get" action="https://www.baidu.com" @submit="submit">
<button type="submit">點(diǎn)我提交表單</button>
</form>
<!-- capture 案例 -->
<div v-on:click.capture="capture">
<button @click.stop="clickTargetA">點(diǎn)我 capture 案例</button>
</div>
<!-- self 案例 -->
<div @click.self="clickTargetContainer" style="padding: 20px;border: 1px solid #cccccc;">
<button @click="clickTargetA">點(diǎn)我 self 案例</button>
</div>
<!-- once 案例 -->
<div>
<button @click.once="clickTargetA">點(diǎn)我 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('父級(jí)容器點(diǎn)擊事件觸發(fā)')
},
clickTargetA() {
alert('按鈕標(biāo)簽點(diǎn)擊事件觸發(fā)')
},
submit() {
alert('提交表單了')
},
capture() {
alert('雖然你點(diǎn)擊的是內(nèi)部元素，但是我先觸發(fā)！')
}
}
})
</script>
</html>
運(yùn)行結(jié)果