2. 程式人生 > >vue中事件修飾符詳解(stop, prevent, self, once, capture, passive)

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

阿新 • • 發佈：2019-09-24
==.stop== 是阻止冒泡行為,不讓當前元素的事件繼續往外觸發,如阻止點選div內部事件,觸發div事件
==.prevent== 是阻止事件本身行為,如阻止超連結的點選跳轉,form表單的點選提交
==.self== 是隻有是自己觸發的自己才會執行,如果接受到內部的冒泡事件傳遞訊號觸發,會忽略掉這個訊號
==.capture== 是改變js預設的事件機制,預設是冒泡,capture功能是將冒泡改為傾聽模式
==.once== 是將事件設定為只執行一次,如 .click.prevent.once 代表只阻止事件的預設行為一次,當第二次觸發的時候事件本身的行為會執行
==.passive== 滾動事件的預設行為 (即滾動行為) 將會立即觸發，而不會等待 onScroll
完成。這個 .passive 修飾符尤其能夠提升移動端的效能。

.passive 和 .prevent 不能一起使用:

  • .prevent 將會被忽略

.self 和 .stop 區別:

  • self只響應當前元素自身觸發的事件，不會響應經過冒泡觸發的事件，並不會阻止冒泡繼續向外部觸發。
  • stop是從自身開始不向外部發射冒泡訊號

覺得有幫助的小夥伴點個

相關推薦

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

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

vue事件修飾符詳解

        vue提倡的是在方法中只有對資料的處理，所以提供了事件修飾符用於DOM的事件處理，常用的事件修飾符有以下幾個：（１）. stop：阻止冒泡（通俗講就是阻止事件向上級DOM元素傳遞）                        點選內層div的結果：     

c#中4個訪問修飾符和8個宣告修飾符詳解

[1]In GrandClass.Constructor [2]In ParentClass.Constructor [3]In ParentClass.Method() use override [4]In GrandClass.Constructor [5]In NewParentClass.Constr

Koltin——最詳細的可見性修飾符詳解

如果 子類 但是 同一文件 文章 f2c -o 系列 star 在Kotlin中，不管是類，對象，接口，構造函數，函數，屬性及其設置器都具有可見性修飾符。Kotlin中的可見性修飾符共四種。即public、protected、private、internal。在不同的場景

vue.js - 事件修飾符

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

Java 基礎之 static 修飾符詳解

        static修飾成員不能訪問沒有static修飾的成員，因為static修飾的成員是所有物件所共有的，也就是屬於這個類，所以在沒有例項化任何一個物件的時候就可以用類來訪問這個靜態屬性， 同時，任何一個物件都可以訪問修改這個靜態屬性，比如：一個靜態方法，它不可以

Java訪問許可權修飾符詳解

Java中的訪問許可權修飾符（Java關鍵字）今天很皮的發現，自己現在竟然不會玩兒Java基礎了，就翻看了一下自己的筆記，寫一篇文章複習一下！測試環境：Java執行環境，myEclipse。測試前準備：實體類包（Student類，Teacher類），測試類包（TestPubl

static修飾符詳解

static表示“全域性”或者“靜態”的意思，用來修飾成員變數和成員方法，也可以形成靜態static程式碼塊，但是Java語言中沒有全域性變數的概念。被static修飾的成員變數和成員方法獨立於該類的任何物件。也就是說，它不依賴類特定的例項，被類的所有例項共享。只要這個類被載

詳細解析vue中的修飾符

1.表單輸入框input中的修飾符 .lazy：加lazy修飾符的區別相當於在輸入後失去焦點或者摁了enter鍵檢視才更新。不加lazy則是在keyup就更新，如下： <input v-model.lazy="msg" > <h3>{{msg}}&

Java介面修飾符詳解-可以修飾介面的修飾符

介面是構建鬆耦合軟體系統的重要法寶。 A、介面用於描述系統對外提供的所有服務,因此介面中的成員常量和方法都必須是公開(public)型別的,確保外部使用者能訪問它們； B、介面僅僅描述系統能做什麼,但不指明如何去做,所以介面中的方法 都是抽象(abstract)方法； C、介面不涉及和任何

USB中的描述符詳解[二]

USB描述符的分類與介紹 USB的符述符分為幾類？有人可能會答：裝置描述符、配置描述符、介面描述符、端點描述符、字串描述符等。但這裡說的不是這樣的。上面的幾類描述符屬於USB標準描述符。另外還有HID描述符和Hub描述符。所以分類是這樣的： 1. 標準描述符1) 裝置描

vue中.sync修飾符的使用

場景需求：在父元件data裡定義一個變數page，我們希望在子元件裡改變這個變數並傳給父元件。 在父元件裡： <template> <v-pagination :pag

USB中的描述符詳解【一】

USB描述符的分類與介紹 USB的符述符分為幾類？有人可能會答：裝置描述符、配置描述符、介面描述符、端點描述符、字串描述符等。但這裡說的不是這樣的。上面的幾類描述符屬於USB標準描述符。另外還有HID描述符和Hub描述符。所以分類是這樣的： 1. 標準描述符1) 裝置描

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

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

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

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

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

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

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

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中.native修飾符

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

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

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