首頁 > web前端 > js教程 > 主體

vue中的事件阻止冒泡的用法詳解

不言
發布: 2018-08-02 11:07:26
原創
11831 人瀏覽過

這篇文章給大家介紹的內容是關於vue中的事件阻止冒泡的用法詳解,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

冒泡的表現

近期用vue做了一個需求,大概是同一個區域,點擊不同位置有不同的反應函數,還有個總的回應函數,好吧,如下圖所示:

vue中的事件阻止冒泡的用法詳解

他們的DOM結構如下:

<p>
    <el-col>
        <p></p>
    </el-col>
    <el-col>
    </el-col>
</p>
登入後複製
登入後複製

冒泡在這裡的表現就是當使用者點擊圖中事件1或事件2區域時,事件3也會執行。這是因為時間冒泡機制,導致點擊'handleClick1'時'handleClick3' 也會回應。在大部分的時候這都是不希望的, 同樣我這裡也不希望。
看下冒泡的經典描述吧還是

vue中的事件阻止冒泡的用法詳解

圖4,5,6,7步驟就是冒泡階段。

通用解決方法

事件冒泡了嘛,那就阻止事件冒泡唄。鑑於不同瀏覽器阻止事件冒泡方法不一樣,建​​議手寫一個事件阻止冒泡方法.

function stopPropagation(event){
    var e=arguments.callee.caller.arguments[0] || event;//这里是因为除了IE有event其他浏览器没有所以要做兼容
    if(window.event){       //这是IE浏览器
        e.cancelBubble=true;
    }else if(e && e.stopPropagation){     //这是其他浏览器
        e.stopPropagation();//阻止冒泡事件
    }
}

<button> 按钮  </button>   // 使用
登入後複製

#vue中解決辦法

##上述相容方法,針對event和停止冒泡方法均做了相容。 但是在vue中需要在內聯語句處理器中存取原始的 DOM 事件。可以用特殊變數

$event 把它傳入方法。如:

<button>
  Submit
</button>

// ...
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}
登入後複製
因此這裡我們可以簡化一下上述停止冒泡方法:

function stopPropagation(event) {
    if(event) {
        event.stopPropagation ? event.stopPropagation(): event.cancelBubble = true;
    }
} 
evnet 为 $event
登入後複製

vue中處理冒泡標準姿勢

事件修飾符

Vue.js 為v-on 提供了事件修飾符,修飾符是由點開頭的指令後綴來表示的。這些事件修飾符主要有以下幾個:

  • stop

  • #prevent

  • #capture

  • prevent

  • #self

  • once

  • passive

看到沒有,第一個'stop'就是我們想要的!

這些修飾符正是為了解決這些問題而生的。也就說我們只要在模板中這樣寫就搞定停止冒泡了。

<p>
    <el-col>
        <p></p>
    </el-col>
    <el-col>
    </el-col>
</p>
登入後複製
登入後複製
很完美有沒有,這就不用在事件回應邏輯中去處理dom事件細節了。 

除 冒泡之外,vue提供的修飾符還有這些功能。

<!-- 阻止单击事件继续传播 -->
<a></a>

<!-- 提交事件不再重载页面 -->
登入後複製

...

...

相關文章推薦:

##vue.js圖片如何轉Base64上傳圖片並預覽

vue中如何定義全域變量和全域方法? (程式碼)

#

以上是vue中的事件阻止冒泡的用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板