溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

重新認(rèn)識vue之事件阻止冒泡的實(shí)現(xiàn)

發(fā)布時間：2020-09-02 03:45:03 來源：腳本之家 閱讀：213 作者：侯貝貝 欄目：web開發(fā)

冒泡的表現(xiàn)

近期用vue做了一個需求，大概是同一個區(qū)域，點(diǎn)擊不同位置有不同的響應(yīng)函數(shù)，還有個總的響應(yīng)函數(shù)，好吧，如下圖所示:

重新認(rèn)識vue之事件阻止冒泡的實(shí)現(xiàn)

他們的DOM結(jié)構(gòu)如下:

<div v-for="(item, index) in listData" @click="handleClick3">
  <el-col :span="grid">
    <div @click="handleClick1"></div>
  </el-col>
  <el-col @click="handleClick2">
  </el-col>
</div>

冒泡在這里的表現(xiàn)就是當(dāng)用戶點(diǎn)擊圖中事件1或事件2區(qū)域時，事件3也會執(zhí)行。這是因?yàn)闀r間冒泡機(jī)制，導(dǎo)致點(diǎn)擊'handleClick1'時'handleClick3' 也會響應(yīng)。在大部分的時候這都是不希望的， 同樣我這里也不希望。

看下冒泡的經(jīng)典描述吧還是

重新認(rèn)識vue之事件阻止冒泡的實(shí)現(xiàn)

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

通用解決辦法

事件冒泡了嘛，那就阻止事件冒泡唄。 鑒于不同瀏覽器阻止事件冒泡方法不一樣，建議手寫一個事件阻止冒泡方法.

function stopPropagation(event){
  var e=arguments.callee.caller.arguments[0] || event;//這里是因?yàn)槌薎E有event其他瀏覽器沒有所以要做兼容
  if(window.event){    //這是IE瀏覽器
    e.cancelBubble=true;
  }else if(e && e.stopPropagation){   //這是其他瀏覽器
    e.stopPropagation();//阻止冒泡事件
  }
}

<button onclick="stopPropagation(event)"> 按鈕 </button>  // 使用

vue中解決辦法

上述兼容方法，針對 event 和 停止冒泡方法均做了兼容。 但是在vue中需要在內(nèi)聯(lián)語句處理器中訪問原始的 DOM 事件。可以用特殊變量 $event 把它傳入方法。如:

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
 Submit
</button>

// ...
methods: {
 warn: function (message, event) {
  // 現(xiàn)在我們可以訪問原生事件對象
  if (event) event.preventDefault()
  alert(message)
 }
}

因此這里我們可以簡化一下上述停止冒泡方法:

function stopPropagation(event) {
  if(event) {
    event.stopPropagation ? event.stopPropagation(): event.cancelBubble = true;
  }
}

evnet 為 $event

vue中處理冒泡標(biāo)準(zhǔn)姿勢

事件修飾符

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

  1. stop
  2. prevent
  3. capture
  4. prevent
  5. self
  6. once
  7. passive

看到?jīng)]有，第一個'stop'就是我們想要的!

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

<div v-for="(item, index) in listData" @click="handleClick3">
  <el-col :span="grid">
    <div @click.stop="handleClick1"></div>
  </el-col>
  <el-col @click.stop="handleClick2">
  </el-col>
</div>

很完美有沒有，這就不用在事件響應(yīng)邏輯中去處理dom事件細(xì)節(jié)了。

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

<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>

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

<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>

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

<!-- 添加事件監(jiān)聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發(fā)的事件先在此處處理，然后才交由內(nèi)部元素進(jìn)行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手