<div id="app"> <div @click="handleClickOne"> <p @click="handleClickTwo">测试</p> </div> </div> <script src="./js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { text:'hello' }, methods: { handleClickOne() { alert('父元素') }, handleClickTwo() { alert('子元素') } } }) </script>
1.事件冒泡, 是从里到外的, 可以看到, 先 子元素 后 父元素
2.事件捕获 是从 外 到内的, 先 父元素 后 子元素 @click.capture
<div id="app"> <div @click.capture="handleClickOne"> <p @click.capture="handleClickTwo">测试</p> </div> </div>
注释: 课外拓展
3. @click.self="handleClick"
点击 父元素内容才触发点击事件, 点 子元素 无效, 有时候 需要这样的功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>阻止冒泡点击事件的弊端</title> </head> <body> <div id="app"> <div @click.self="handleClick"> 我是父元素内容 <p>我是子元素,点我没用, 加了self</p> </div> </div> <script src="./js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { text:'hello' }, methods: { handleClick() { alert('点击了') } } }) </script> </body> </html>
<div id="app">
<div @click="handleClickOne">
<p @click="handleClickTwo">测试</p>
</div>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
text:'hello'
},
methods: {
handleClickOne() {
alert('父元素')
},
handleClickTwo() {
alert('子元素')
}
}
})
</script>