欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

VUE中如何實(shí)現(xiàn)阻止事件冒泡

 更新時間:2022年08月31日 14:07:52   作者:得知此事須躬行  
這篇文章主要介紹了VUE中如何實(shí)現(xiàn)阻止事件冒泡,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

如何阻止事件冒泡

當(dāng)父子元素中都有點(diǎn)擊事件的時候,為了讓觸發(fā)子元素中的事件時,不去觸發(fā)父元素中的事件,可以在子元素事件中添加stop來阻止事件冒泡。

如圖,在button的點(diǎn)擊事件中加上stop,觸發(fā)addStatus的時候,就不會去觸發(fā)父元素中的showColorStatus事件。

科普

  • .stop 是阻止冒泡行為,不讓當(dāng)前元素的事件繼續(xù)往外觸發(fā),如阻止點(diǎn)擊div內(nèi)部事件,觸發(fā)div事件
  • .prevent 是阻止事件本身行為,如阻止超鏈接的點(diǎn)擊跳轉(zhuǎn),form表單的點(diǎn)擊提交
  • .self 是只有是自己觸發(fā)的自己才會執(zhí)行,如果接受到內(nèi)部的冒泡事件傳遞信號觸發(fā),會忽略掉這個信號
  • .capture 是改變js默認(rèn)的事件機(jī)制,默認(rèn)是冒泡,capture功能是將冒泡改為傾聽模式
  • .once 是將事件設(shè)置為只執(zhí)行一次,如 .click.prevent.once 代表只阻止事件的默認(rèn)行為一次,當(dāng)?shù)诙斡|發(fā)的時候事件本身的行為會執(zhí)行
  • .passive 滾動事件的默認(rèn)行為 (即滾動行為) 將會立即觸發(fā),而不會等待 onScroll 完成。這個 .passive 修飾符尤其能夠提升移動端的性能。

阻止click事件冒泡(防止觸發(fā)另一個事件)的方法

方法一

使用vue阻止子級元素的click事件冒泡。簡單得:可以直接用stop

<div @click="test1()"> ? ?
? ? <span @click.stop="test2()">按鈕1</span> ? ?
? ? <span>按鈕2</span>?
</div>

這樣點(diǎn)擊div里面的按鈕1,就不會觸發(fā)div綁定時間test1()方法。

方法二

可以自己寫個阻止冒泡事件 然后在發(fā)生冒泡的元素中調(diào)用這個事件

@click="_stopPropagation($event)"

methods:{ ? ? ?
? ? _stopPropagation(ev){ ? ? ?
? ? ? ? var _this = this; ? ? ?
? ? ? ? ev.stopPropagation(); ? ? ?
? ? },
}

以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。

  • 解決vue 項(xiàng)目引入字體圖標(biāo)報錯、不顯示等問題

    解決vue 項(xiàng)目引入字體圖標(biāo)報錯、不顯示等問題

    今天小編就為大家分享一篇解決vue 項(xiàng)目引入字體圖標(biāo)報錯、不顯示等問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vue如何從1.0遷移到2.0

    Vue如何從1.0遷移到2.0

    這篇文章主要介紹了Vue如何從1.0遷移到2.0的相關(guān)資料,需要的朋友可以參考下
    2017-10-10
  • Vuex中mutations和actions的區(qū)別及說明

    Vuex中mutations和actions的區(qū)別及說明

    這篇文章主要介紹了Vuex中mutations和actions的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • Vue實(shí)現(xiàn)炫酷的代碼瀑布流背景

    Vue實(shí)現(xiàn)炫酷的代碼瀑布流背景

    這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)炫酷的代碼瀑布流背景,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • VUE3+Element-plus中el-form的使用示例代碼

    VUE3+Element-plus中el-form的使用示例代碼

    這篇文章主要介紹了VUE3+Element-plus中el-form的使用示例代碼,本文通過圖文示例代碼相結(jié)合給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2024-07-07
  • 講解vue-router之命名路由和命名視圖

    講解vue-router之命名路由和命名視圖

    這篇文章主要介紹了講解vue-router之命名路由和命名視圖,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-05-05
  • vue.config.js中配置分包策略及常見的配置選項(xiàng)

    vue.config.js中配置分包策略及常見的配置選項(xiàng)

    在Vue.js中分包(Code Splitting)是一種將應(yīng)用程序代碼拆分為不同的塊或包的技術(shù),從而在需要時按需加載這些包,下面這篇文章主要給大家介紹了關(guān)于vue.config.js中配置分包策略及常見的配置選項(xiàng)的相關(guān)資料,需要的朋友可以參考下
    2024-02-02
  • vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡單的拖拽元素功能示例

    vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡單的拖拽元素功能示例

    本篇文章主要介紹了vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡單的拖拽元素功能示例,具有一定的參考價值,感興趣的小伙伴們可以參考一下。
    2017-02-02
  • 用electron打包vue項(xiàng)目中的報錯問題及解決

    用electron打包vue項(xiàng)目中的報錯問題及解決

    這篇文章主要介紹了用electron打包vue項(xiàng)目中的報錯問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • 最新評論