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

vue.js 中的.capture事件修飾符的用法。

阿新 • • 發佈：2019-02-04

.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>

相關推薦

vue.js中的事件修飾符.self的用法。

.self可以理解為跳過冒泡事件和捕獲事件，只有直接作用在該元素上的事件才可以執行。 程式碼如下： <!DOCTYPE html> <html lang="en"> &l

vue.js中的事件修飾符的使用

事件修飾符: .stop .prevent .capture .self .once 1 .stop：阻止事件冒泡。 2.prevent：阻止預設事件。 3.capture：新增事件偵聽器時使用事件捕獲模式 （若有多個該修飾符的元素則由外

vue.js 中的.capture事件修飾符的用法。

.capture事件修飾符的作用新增事件偵聽器時使用事件捕獲模式 即是給元素新增一個監聽器，當元素髮生冒泡時，先觸發帶有該修飾符的元素。若有多個該修飾符，則由外而內觸發。 就是誰有該事件修飾符，就先

vue.js 中 :is 與 is 的用法和區別,學習全域性與區域性註冊元件

  vue中 is用來動態切換元件，詳細請看示例：（順便講解父向子元件的傳遞資訊） html： <div id="app">   <!--         1.在這裡呼叫元件。   &

Vue元件中利用.sync修飾符實現對prop進行雙向資料繫結

在有些情況下，我們可能需要對一個 prop 進行“雙向繫結”。不幸的是，真正的雙向繫結會帶來維護上的問題，因為子元件可以修改父元件，且在父元件和子元件都沒有明顯的改動來源。 所以官方推薦以update:my-prop-name 的模式觸發事件取而代之 為了好理解，我寫了一

vue元件中的.sync修飾符使用

我們知道，在vue的元件通訊props中，一般情況下，資料都是單向的，即父元件資料的更改會下傳到子元件（用了.once除外），子元件對資料無法做出更改（當傳遞的資料是引用資料型別時，可以更改父元件資料，比如，陣列的破壞性方法，push等）。在vue1.x時，提供

vue中事件修飾符詳解(stop, prevent, self, once, capture, passive)

==.stop== 是阻止冒泡行為,不讓當前元素的事件繼續往外觸發,如阻止點選div內部事件,觸發div事件 ==.prevent== 是阻止事件本身行為,如阻止超連結的點選跳轉,form表單的點選提交 ==.self== 是隻有是自己觸發的自己才會執行,如果接受到內部的冒泡事件傳遞訊號觸發,會忽略掉這個訊

Vue.js中.native修飾符

image java HR pan cti -a function bsp clas .native修飾符 官方對.native修飾符的解釋為： 　　有時候，你可能想在某個組件的根元素上監聽一個原生事件。可以使用 v-on 的修飾符 .native 。例如： <my

Vue.js-03：第三章 - 事件修飾符的使用

 一、前言 　　熟悉了 Vue 的指令系統後，在實際開發中，不可避免的會使用到對於事件的操作，如何處理 DOM 事件流，成為我們必須要掌握的技能。不同於傳統的前端開發，在 Vue 中給我們提供了事件修飾符這一利器，使我們可以便捷的處理 DOM 事件，本章，一起來學習如何使用事件修飾符來實現對於 D

【Vue.js 牛刀小試】03：第三章 - 事件修飾符的使用

前言         熟悉了 Vue 的指令系統後，在實際開發中，不可避免的會使用到對於事件的操作，如何處理 DOM 事件流，成為我們必須要掌握的技能。不同於傳統的前端開發，在 Vue 中給我們提供了事件修飾符這一利器，使我們可

vue.js - 事件修飾符

事件修飾符 .stop : 阻止事件冒泡 .prevent : 阻止預設事件 .once : 只生效一次 <!-- 阻止單擊事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再過載頁面，

【Vue.js學習筆記】4：事件修飾符,鍵盤事件,鍵值修飾符

事件修飾符 在Vue的官方文件中給出了引入v-on:的事件修飾符的理念是，不希望在方法中去處理DOM細節。 事件冒泡 事件在事件源上發生，處理事件的方法並未繫結在該事件源上，事件就要向外或者向內傳播（propagation），也稱事件冒泡。在JS裡，可以用事件物件的stopP

27.28. VUE學習之--事件修飾符之stop&capture&self&once例項詳解

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist

從零開始學 Web 之 Vue.js（一）Vue.js概述，基本結構，指令，事件修飾符，樣式

大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 部落格園：http://www.cnblogs.com/lvonve/ CSDN：https://blog.csdn.net/lvonve/

前端框架vue.js系列（4）：事件修飾符與按鍵修飾符

vue修飾符是指在觸發事件或按鍵時額外的觸發條件或回撥。比如點選事件只允許觸發一次，可以使用@click.once。 原生事件物件 vue可以通過以下方式，獲取原生的事件物件： <button @click="getEventDom($event);">

事件修飾符vue.js

在事件處理器中經常需要呼叫event.preventDefault()或event.stopPropagation()。 為了解決這個問題，Vue.js 為v-on提供兩個事件修飾符：.prevent

vue學習(六) 事件修飾符 stop prevent capture self once

prev con bsp 修飾 function html 通過 pre 效果 //html <div id="app">　　<div @click="divHandler" style="height:150px,background-color:

vue.js中的data的用法

fun div tle new end 用法 pan 位置 turn data在vue框架中位置不一樣，用法也不一樣。簡單地說，在實例中data是一個對象，在組件中data就得是函數返回對象。 new Vue( { data : { tit

[vue]vue v-on事件綁定(原生修飾符+vue自帶事件修飾符)

w3cschool char 用戶 inside img ins app parent pan preventDefault阻止默認行為和stopPropagation終止傳遞 event.preventDefault() 鏈接本來點了可以跳轉, 如果註冊preventDe

Vue—事件修飾符

Vue事件修飾符 Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細節，如：event.preventDefault() 或 event.stopPropagation()。 Vue.js通過由點 (.) 表示的指令字尾來呼叫修飾符。 .stop.prevent.capture.self