capture事件修飾符的作用是為元素添加一個監聽器,當元素發生冒泡時,先觸發帶有該修飾符的元素。這篇文章為大家介紹了Vue 事件修飾符capture 的使用,需要的朋友參考下吧
.capture事件修飾符的作用添加事件偵聽器時使用事件捕獲模式
即為元素添加一個監聽器,當元素發生冒泡時,先觸發帶有該修飾符的元素。若有多個該修飾符,則由外而內觸發。
是誰有該事件修飾符,就先觸發誰。
程式碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>.capture事件修饰符</title> <style type="text/css"> * { margin: 0 auto; text-align: center; line-height: 40px; } p { width: 100px; } #obj1 { background: deeppink; } #obj2 { background: pink; } #obj3 { background: hotpink; } #obj4 { background: #ff4225; } </style> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> </head> <body> <p id="content"> <p id="obj1" v-on:click.capture="doc"> obj1 <p id="obj2" v-on:click.capture="doc"> obj2 <p id="obj3" v-on:click="doc"> obj3 <p id="obj4" v-on:click="doc"> obj4 <!--。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。点击obj4的时候,弹出的顺序为:obj1、obj2、obj4、obj3; 由于1,2有修饰符,故而先触发事件,然后就是4本身触发,最后冒泡事件。 --> </p> </p> </p> </p> </p> <script type="text/javascript"> var content = new Vue({ el: "#content", data: { id: '' }, methods: { doc: function () { this.id = event.currentTarget.id; alert(this.id) } } }) </script> </body> </html>
上面是我整理給大家的,希望今後會對大家有幫助。
相關文章:
使用jquery ajaxform springboot如何實作資料更新
#以上是詳細介紹Vue事件修飾符capture的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!