vue click.stop阻止點(diǎn)擊事件繼續(xù)傳播的方法

更新時(shí)間：2018年09月04日 12:05:39 作者：BenCod

今天小編就為大家分享一篇vue click.stop阻止點(diǎn)擊事件繼續(xù)傳播的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

如下所示：

<div id="app">
  <div v-on:click="dodo">
   <button v-on:click="doThis">阻止單擊事件繼續(xù)傳播</button>
  </div>
 </div>

 <script>
  var app = new Vue({
   el: "#app",
   data: {
    name: "Vue.js"
   },
   methods: {
    doThis: function () {
     alert("noclick");
    },
    dodo: function () {
     alert("dodo");
    }
   }
  });
 </script>

將會(huì)先彈出“noclick”,再?gòu)棾觥癲odo”。

 <div id="app">
  <div v-on:click="dodo">
   <button v-on:click.stop="doThis">阻止單擊事件繼續(xù)傳播</button>
  </div>
 </div>

 <script>
  var app = new Vue({
   el: "#app",
   data: {
    name: "Vue.js"
   },
   methods: {
    doThis: function () {
     alert("noclick");
    },
    dodo: function () {
     alert("dodo");
    }
   }
  });
 </script>

只彈出“noclick”

以上這篇vue click.stop阻止點(diǎn)擊事件繼續(xù)傳播的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue component 中引入less文件報(bào)錯(cuò) Module build failed
這篇文章主要介紹了vue component 中引入less文件報(bào)錯(cuò) Module build failed的解決方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-04-04
Vue使用 onMounted 確保在組件掛載后執(zhí)行異步操作示例詳解
在 Vue.js 或其他類似框架中，使用 onMounted 是為了確保在組件掛載后執(zhí)行異步操作，這篇文章主要介紹了Vue使用onMounted確保在組件掛載后執(zhí)行異步操作,需要的朋友可以參考下
2023-06-06
探索Vue中組合式API和選項(xiàng)式API的用法與比較
Vue3為我們開(kāi)發(fā)提供了兩種組件邏輯實(shí)現(xiàn)方式：選項(xiàng)式API和組合式API,本文將嘗試為大家分析什么是選項(xiàng)式API和組合式API,以及兩種API的優(yōu)缺點(diǎn),希望對(duì)大家有所幫助
2023-12-12
vue如何使用async、await實(shí)現(xiàn)同步請(qǐng)求
這篇文章主要介紹了vue如何使用async、await實(shí)現(xiàn)同步請(qǐng)求,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-12-12
vue3+vite動(dòng)態(tài)引入圖片方式
這篇文章主要介紹了vue3+vite動(dòng)態(tài)引入圖片方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
vue項(xiàng)目中全局引入1個(gè).scss文件的問(wèn)題解決
這篇文章主要跟大家介紹了vue項(xiàng)目中全局引入1個(gè).scss文件的問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
vue :src 文件路徑錯(cuò)誤問(wèn)題的解決方法
這篇文章主要介紹了vue :src 文件路徑錯(cuò)誤問(wèn)題的簡(jiǎn)單解決方法，本文分步驟給大家介紹的非常詳細(xì)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧
2018-05-05
深入理解Vue.js3中Reactive的實(shí)現(xiàn)
reactive是Vue 3的Composition API中的一個(gè)函數(shù),它允許你創(chuàng)建一個(gè)響應(yīng)式的數(shù)據(jù)對(duì)象,本文主要介紹了深入理解Vue.js3中Reactive的實(shí)現(xiàn),感興趣的可以了解一下
2024-01-01
基于vue+uniapp直播項(xiàng)目實(shí)現(xiàn)uni-app仿抖音/陌陌直播室功能
uni-liveShow是一個(gè)基于vue+uni-app技術(shù)開(kāi)發(fā)的集小視頻/IM聊天/直播等功能于一體的微直播項(xiàng)目。本文通過(guò)實(shí)例圖文的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2019-11-11
vue3.0中setup使用(兩種用法)
這篇文章主要介紹了vue3.0中setup使用，本文通過(guò)兩種用法給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-12-12