2. 程式人生 > >在Vue中，關於事件冒泡

在Vue中，關於事件冒泡

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

在專案中或多或少都會遇見關於事件冒泡的問題。
什麼是事件冒泡：
對於父元素的事件，你的子元素也會觸發，可以理解為父債子還。
對於我們而言，經常會有不想讓某個子元素去觸發父元素的事件，也就是說，上一輩欠的錢，別來找我要。
這個時候我們就需要來阻止事件冒泡了。
一般情況我們這樣來實現：

<!DOCTYPE html>

<html>

<head>

        <title>Test</title>

        <meta charset="utf-8">

        <link rel="stylesheet"
 
 type="text/css" href="style.css">

        <script type="text/javascript" src="jquery.js"></script>

        <script type="text/javascript">

        function doSometing(obj,evt){

                 alert(obj.id);

                 // 做瀏覽器相容

                 var e = (evt)? evt:window.event;      //獲取IE或非IE瀏覽器的事件
 


                 if (window.event) {                              //如果是IE瀏覽器

                         e.cancelBubble = true;         //IE瀏覽器，設定該屬性為true,取消事件冒泡

                 }else{

                         e.stopPropagation();                        //非IE瀏覽器，該方法取消事件的進一步捕獲或冒泡。

                 }

        }

        
 
</script>

</head>

<body>

<div id="parent1" onclick="alert(this.id);" style="width: 250px;background-color: #cacaca">

        <p>This is parent1 div</p>

<div id="child1" onclick="alert(this.id);" style="width: 200px;background-color: orange">

        <p>This is child1.Will bubble.</p>

</div>

</div>

<br>

<div id="parent2" onclick="alert(this.id);" style="width: 250px;background-color: cyan;">

        <p>This is parent2 div</p>

        <div id="child2" onclick="doSomething(this,event);" style="width: 200px;background-color: #aeaeae">

                 <p>This is child2.</p>

        </div>

</div>

</div>

</body>

</html>

而在Vue中，我們則有一個內容叫做事件修飾符：

事件修飾符

在事件處理器中經常需要呼叫 event.preventDefault() 或 event.stopPropagation()。儘管我們在方法內可以輕鬆做到，不過讓方法是純粹的資料邏輯而不處理 DOM 事件細節會更好。

為了解決這個問題，Vue.js 為 v-on 提供兩個 事件修飾符：.prevent 與 .stop。你是否還記得修飾符是點號打頭的指令字尾？

<!-- 阻止單擊事件冒泡 -->

<a v-on:click.stop="doThis"></a>


<!-- 提交事件不再過載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>


<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat">


<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

相關推薦

在Vue中，關於事件冒泡

在專案中或多或少都會遇見關於事件冒泡的問題。 什麼是事件冒泡： 對於父元素的事件，你的子元素也會觸發，可以理解為父債子還。 對於我們而言，經常會有不想讓某個子元素去觸發父元素的事件，也就是說，上一輩欠的錢，別來找我要。 這個時候我們就需要來阻止事件冒泡了

js中的事件維託，事件捕獲，事件冒泡

事件維託：利用冒泡的原理把事件加到父元素或祖元素上，觸發執行效果。 事件冒泡（event bubbling）：ie的事件流，從最具體的元素逐級向上傳播到較為具體的節點，如果你單擊了頁面中的<div>元素，那麼這個click事件會按照如下順序傳播。1<div>，2&l

關於JS中事件捕獲，事件冒泡與事件代理（事件委託），及e.target與e.currentcurrentTarget的區別

事件捕獲：        表示事件的觸發順序，當繫結事件方法的第三個引數值設定為true時，事件觸發的順序為捕獲。        當一個元素的事件被觸發的時候（如onclick事件），該事件會從document開

JS中事件繫結函式，事件捕獲，事件冒泡

1 事件繫結：事件與函式繫結的方式 1.1 元素.onclick這種形式，如下： 1 <div id="div1">aaa</div> 2 3 <script type="text/javascript">

JS中事件綁定函數，事件捕獲，事件冒泡

obj adding 事件 點擊 dev 不同 aaa 什麽 div 1 事件綁定：事件與函數綁定和怎麽取消綁定 1.1 元素.onclick這種形式，如下： 1 <div id="div1">aaa</div> 2

在vue中，Echarts雷達圖中indicator的點擊事件，不能改變data中的值的解決方法

console http 分享圖片 mage char ech name java cat Echarts雷達圖中indicator的點擊事件，代碼如下: // ----- 點擊事件 radarChart.on(‘click‘, function (pa

JQuery中阻止事件冒泡方式及其區別

use urn query class span 事件冒泡 事件 clas nbsp 方式一：event.stopPropagation(); 1 $("#div1").mousedown(function(event){ 2 event.stopPropa

關於事件流，事件冒泡和事件捕獲

有意 clas 向上 接收 上傳 單擊事件 sca dom 描述 1.事件流 假設有這樣一個場景： 有一個導航條：div > ul > li > a，每個元素塊寬高一樣，就像是一組同心圓。如果我們點擊a元素，那麽瀏覽器會認為單擊事件不僅僅發生在a上。換

事件綁定，事件捕獲，事件冒泡以及事件委托，兼容IE

window t對象 找到 添加多個 src 階段 之前 事件監聽 hang ● 事件分為三個階段： 事件捕獲 --> 事件目標 --> 事件冒泡 ● 事件捕獲：事件發生時（onclick,onmouseover……）首先發生在document上，然後依

Vue中，父組件向子組件傳值

app 接收 通過 col pro 分享圖片 nts bubuko ont 1:在src/components/child/文件夾下，創建一個名為：child.vue的子組件 2：在父組件中，設置好需要傳遞的數據 3：在App.vue中引入並註冊子組件 4：通過v-b

Vue2.0筆記——事件對象，事件冒泡及默認行為

Vue事件對象 關於事件即v-on在指令中已經介紹過，@簡寫也說過,就不再說明如何聲明使用了。我們可以在調用事件方法是為方法添加參數 $event,表示一個事件實例。在處理方法中，得到這個實參，可通過這個對象獲得一些方法和作用。 <div id="app"> <button @cli

vue中，使用手機釘釘掃描二維碼登錄

indexof ons 開發 java ava asc dingding erro zepto 最新項目要做一個，使用手機釘釘掃描二維碼登錄pc系統的功能，手機掃碼二維碼後，會彈出一個確定登錄的頁面，點擊確定之後，pc端就會登錄進去 第一步：查看釘釘開發平臺 釘釘開發平

vue中的事件監聽之——v-on vs .$on

跟著視訊中老師的教學視訊學vue的時候，看很多時候都用@(v-on)來監聽子級emit的自定義事件，但在bus匯流排那塊，又用.$on來監聽bus自身emit的事件，v-on之間似乎相似但又不同，今天對照vue官網api學習並coding了相關程式碼，兩者的用法與比較描述如下。 v-

capture JS中的事件冒泡（Bubble）和事件捕獲（capture）以及如何阻止事件的冒泡

JS中的事件冒泡（Bubble）和事件捕獲（capture）以及如何阻止事件的冒泡 對“捕獲”和“冒泡”這兩個概念，通常我們對冒泡瞭解和使用的會更多一些，因為在我們使用的所有瀏覽器中，都支援事件冒泡 ，即事件由子元素向祖先元素傳播的，就像氣泡從水底向水面上浮一樣。而在像firefox,chrome,safa

JS中的事件冒泡

js中的事件冒泡指的是：多個元素巢狀的時候，它們就會有層次關係，當這些元素註冊了相同的事件時，如果其中一層的元素觸發了這個事件，可能導致其它層的元素也觸發這個事件，這樣一來就會造成混亂。這個情況就是事件冒泡。為了避免這種混亂的發生，我們要想辦法阻止事件冒泡的發生。 看一個事件冒泡的例子：

Vue中，methods中呼叫filters裡的過濾器

需求：vue中，除了在模板中使用過濾器，有時候，methods中也需要使用filters中的過濾器!   this.$options.filters[filter](...args) //這種方法很簡單,也很實用 列印 this.$options.filters報錯，

React和Vue中，是如何監聽變數變化的

React 中 本地除錯React程式碼的方法 先將React程式碼下載到本地，進入專案資料夾後yarn build 利用create-react-app建立一個自己的專案 把react原始碼和自己剛剛建立的專案關聯起來，之前build原始碼到build資料夾下面，然後cd到react資料夾

js高階：enebt，事件冒泡，事件捕獲

1.事件 　　瀏覽器客戶端上客戶觸發的行為都稱為事件 所有的事件都是天生自帶的，不需要我們去繫結，只需要我們去觸發。 通過 obj.事件名=function（）{} 事件名：onmouseover 滑鼠懸浮 　　　　　onmouseout   滑鼠移除 　　　　onmousedown滑鼠

事件，事件冒泡和事件捕獲

1.事件 瀏覽器客戶端上客戶觸發的行為都稱為事件 所有的事件都是天生自帶的，不需要我們去繫結，只需要我們去觸發。 通過obj.事件名=function(){} 事件名:onmouseover onmouseout onmousedown onmousemove onmouseup Onclick&n

微信小程式中的事件冒泡問題

冒泡事件：當一個元件上的事件被觸發後，該事件會向父節點傳遞。 小程式中事件繫結對事件冒泡問題的處理： bindtap 事件繫結不會阻止冒泡事件向上冒泡 catchtap 事件繫結可以阻止冒泡事件向上冒泡 wxml: js: 父元素：touch:function(){ con