vue的事件冒泡

Youngs 發布于2019-08-23 18:04 / 1532人閱讀

摘要：什么是事件冒泡先說冒泡，我們都知道水中有氣泡的時候，氣泡會從水底往上升，由深往淺的。

什么是事件冒泡？

先說冒泡，我們都知道水中有氣泡的時候，氣泡會從水底往上升，由深往淺的。但是水在上升的過程中會經歷不同的深度的水。
那么我們再來解釋一下什么是事件冒泡，如果屬性瀏覽器原理的同學就知道，頁面是由文檔流（即dom樹組成的），當我們在
一個時間觸發的時候，這個事件就像這個氣泡一樣，從dom樹的底層，一層一層的往上面傳遞，一直傳遞到dom的根節點，如果子元素和父級元素觸發的是相同事件的時候，當子元素被觸發的時候父元素也會被觸發冒泡機制，這就是冒泡的基本原理。

在不同的內核瀏覽器中，冒泡是不一樣的

IE<11： div => body => html => document

在其他內核中：div => body =>html => window

注意：在JavaScript中，并非所有的事件都可以冒泡，像：blur、unload、load等事件就不能冒泡

示例代碼：
Html

css

#app{
 width: 500px;
 height: 500px;
 margin: 200px auto;
 background-color: #f5f5f5;
 border:2px solid #ffffdffffd;
 }
 #father{
 width: 400px;
 height: 400px;
 background-color: rgb(168, 125, 125);
 text-align: center;
 color:red;
 }
 #child{
 width: 200px;
 height: 200px;
 background-color: #fff;
 color:blue;
 }

  var father = document.getElementById("father");
var child = document.getElementById("child");
father.addEventListener("click", function () {
    console.log("我是父級元素")
}, false)
child.addEventListener("click", function () {
    console.log("我是子集元素")
}, false)

當我點擊子元素時，控制臺打印如下圖：

當我點擊父元素時：控制臺打印出來如下圖：

可以看到，當我在點擊子元素時，父元素綁定的點擊事件也被觸發了。
那么我們如何阻止這種事件傳遞呢？

如何阻止事件冒泡

廢話少說，直接上代碼

var father = document.getElementById("father");
var child = document.getElementById("child");
father.addEventListener("click", function () {
    if(event && event.stopPropagation){
        event.stopPropagation() // 非IE瀏覽器
    }else{
    event.cancelBubble = true; //IE瀏覽器
    }
    console.log("我是父級元素")
}, false)
child.addEventListener("click", function () {
    if (event && event.stopPropagation) {
        event.stopPropagation() // 非IE瀏覽器
    } else {
        event.cancelBubble = true; //IE瀏覽器
    }
    console.log("我是子集元素")
}, false)

在W3C中，規定DOM標準通過調用event對象的stopPropagation()方法即可阻止冒泡型事件的進一步傳遞。

那么在vue中我們如何使用呢？

我們可以用.stop修飾符綁定在子元素上面，阻止其向父元素冒泡，從而達到不會觸發冒泡事件




    
    
    
    Document





    
        
            我是子元素
        
        我是父級元素

點擊子元素打印出來日志

：

當然，事件冒泡是瀏覽器的默認行為，之所以這樣設計，是有原因的，因為有時候事件冒泡可以提供很多的便利，但是使用不當就會造成很多不必要的bug。

總結：1.事件冒泡的基本原理

 2.原生js和vue中分別如何阻止事件冒泡

本文首發微信公眾號：碼客小棧
歡迎掃描二維碼關注公眾號，小碼不定時的分享工作中的問題和前端、python等文章（還有漂亮的小姐姐喲！！！）。

GPU云服務器云服務器冒泡事件事件冒泡事件冒泡機制阻止冒泡事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104622.html

重新認識vue之事件阻止冒泡

摘要：通用解決辦法事件冒泡了嘛，那就阻止事件冒泡唄。很完美有沒有，這就不用在事件響應邏輯中去處理事件細節了。冒泡的表現近期用vue做了一個需求，大概是同一個區域，點擊不同位置有不同的響應函數，還有個總的響應函數，好吧，如下圖所示: showImg(https://segmentfault.com/img/remote/1460000015852878?w=1962&h=392); 他們的...

marek 2019-08-23 10:37 評論0 收藏0
淺談---事件冒泡--事件捕獲--Vue2.0中的capture

摘要：直白點事件觸發順序子元素父元素事件冒泡和事件捕獲圖解標準事件監聽標準事件監聽其實是事件冒泡和事件捕獲的混合體任何事件發生時，先從頂層開始進行事件捕獲，直到事件觸發到達了事件源元素。然后，再從事件源往上進行事件冒泡，直到到達。前言本文主要介紹事件冒泡和事件捕獲以及Vue中的capture 主要內容事件捕獲含義:從最特定的事件目標到最不特定的事件目標(document對象...

Raaabbit 2019-08-20 17:07 評論0 收藏0
vue1.x 事件對象（二）

摘要：事件句柄的新特性之一是能夠使事件觸發瀏覽器中的行為，比如當用戶點擊某個元素時啟動一段。下面是一個屬性列表，可將之插入標簽以定義事件的行為。鍵盤事件的代碼鏈接其他基礎使用一本文主要簡述了event 對象，順便復習了一下事件句柄　(Event Handlers)，鍵盤的一些屬性，以及最容易遇到的事件冒泡，同樣的阻止事件冒泡，在vue 下是怎樣解決的，vue 提供了那些方便去阻止事件冒泡。...

Enlightenment 2019-08-21 12:04 評論0 收藏0
vue1.x 事件對象（二）

摘要：事件句柄的新特性之一是能夠使事件觸發瀏覽器中的行為，比如當用戶點擊某個元素時啟動一段。下面是一個屬性列表，可將之插入標簽以定義事件的行為。鍵盤事件的代碼鏈接其他基礎使用一本文主要簡述了event 對象，順便復習了一下事件句柄　(Event Handlers)，鍵盤的一些屬性，以及最容易遇到的事件冒泡，同樣的阻止事件冒泡，在vue 下是怎樣解決的，vue 提供了那些方便去阻止事件冒泡。...

JasinYip 2019-08-01 17:27 評論0 收藏0