1. 事件修飾符
-
.stop 阻止冒泡
-
.prevent 阻止預設事件
-
.once 只執行一次
-
.self 只當事件在元素本身時觸發
-
.capture 新增事件偵聽器時使用事件捕獲模式
<!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>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<div @click='divClickHandler' style="width: 200px;height:200px;background-color:red">
div
<!-- .stop 阻止冒泡 -->
<!-- 只執行btnClickHandler divClickHandler被阻止了 -->
<button @click.stop='btnClickHandler'>按鈕</button>
</div>
<div @click='divClickHandler' style="width: 200px;height:200px;background-color:red">
div
<!-- 阻止預設事件 -->
<!-- href 跳轉失效 -->
<a href="http://www.baidu.com" @click.prevent='linkClick'>百度</a>
</div>
<div @click.captrue='divClickHandler' style="width: 200px;height:200px;background-color:red">
div
<!-- 實現捕獲觸發事件機制 -->
<!-- 先執行divClickHandler 在執行btnClickHandler -->
<button @click='btnClickHandler'>按鈕</button>
</div>
<!-- 只執行一次 -->
<a href="http://www.baidu.com" @click.prevent.once='linkClick'>百度</a>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
\
},
methods: {
// div點選事件
divClickHandler(){
console.log('點選了div')
},
// 按鈕點選事件
btnClickHandler(){
console.log('點選了btn')
},
//阻止預設事件
linkClick(){
console.log("link click")
}
},
})
</script>
</body>
</html>