1. 程式人生 > >vue.js 中的.capture事件修飾符的用法。

vue.js 中的.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; }
div { width: 100px; } #obj1 { background: deeppink; } #obj2 { background: pink; } #obj3 { background: hotpink; }
#obj4 { background: #ff4225; }
</style> <script src="vue.js"></script> </head> <body> <div id="content"> <div id="obj1" v-on:click.capture="doc"> obj1 <div id="obj2" v-on:click.capture="doc"> obj2 <div
id="obj3" v-on:click="doc">
obj3 <div id="obj4" v-on:click="doc"> obj4 <!--。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。點選obj4的時候,彈出的順序為:obj1、obj2、obj4、obj3; 由於1,2有修飾符,故而先觸發事件,然後就是4本身觸發,最後冒泡事件。 --> </div> </div> </div> </div> </div> <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>