資訊專欄INFORMATION COLUMN
摘要：通用解決辦法事件冒泡了嘛，那就阻止事件冒泡唄。很完美有沒有，這就不用在事件響應(yīng)邏輯中去處理事件細(xì)節(jié)了。
冒泡的表現(xiàn)
近期用vue做了一個需求，大概是同一個區(qū)域，點擊不同位置有不同的響應(yīng)函數(shù)，還有個總的響應(yīng)函數(shù)，好吧，如下圖所示:
他們的DOM結(jié)構(gòu)如下:
冒泡在這里的表現(xiàn)就是當(dāng)用戶點擊圖中事件1或事件2區(qū)域時，事件3也會執(zhí)行。這是因為時間冒泡機制，導(dǎo)致點擊"handleClick1"時"handleClick3" 也會響應(yīng)。在大部分的時候這都是不希望的， 同樣我這里也不希望。
看下冒泡的經(jīng)典描述吧還是
圖中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();//阻止冒泡事件
}
}
// 使用
vue中解決辦法
上述兼容方法，針對 event 和 停止冒泡方法均做了兼容。 但是在vue中需要在內(nèi)聯(lián)語句處理器中訪問原始的 DOM 事件?？梢杂锰厥庾兞?$event 把它傳入方法。如:
// ...
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 提供了事件修飾符，修飾符是由點開頭的指令后綴來表示的。這些事件修飾符主要有以下幾個:
stop
prevent
capture
prevent
self
once
passive
看到?jīng)]有，第一個"stop"就是我們想要的!
這些修飾符正是為了解決這些問題而生的。也就說我們只需要在模板中這樣寫就搞定停止冒泡了。
很完美有沒有，這就不用在事件響應(yīng)邏輯中去處理dom事件細(xì)節(jié)了。
除 冒泡之外，vue提供的修飾符還有這些功能。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96523.html
摘要：事件句柄的新特性之一是能夠使事件觸發(fā)瀏覽器中的行為，比如當(dāng)用戶點擊某個元素時啟動一段。下面是一個屬性列表，可將之插入標(biāo)簽以定義事件的行為。鍵盤事件的代碼鏈接其他基礎(chǔ)使用一 本文主要簡述了event 對象，順便復(fù)習(xí)了一下事件句柄 (Event Handlers)，鍵盤的一些屬性，以及最容易遇到的事件冒泡，同樣的阻止事件冒泡，在vue 下是怎樣解決的，vue 提供了那些方便去阻止事件冒泡。...
摘要：事件句柄的新特性之一是能夠使事件觸發(fā)瀏覽器中的行為，比如當(dāng)用戶點擊某個元素時啟動一段。下面是一個屬性列表，可將之插入標(biāo)簽以定義事件的行為。鍵盤事件的代碼鏈接其他基礎(chǔ)使用一 本文主要簡述了event 對象，順便復(fù)習(xí)了一下事件句柄 (Event Handlers)，鍵盤的一些屬性，以及最容易遇到的事件冒泡，同樣的阻止事件冒泡，在vue 下是怎樣解決的，vue 提供了那些方便去阻止事件冒泡。...
這個百度貼吧的項目是 vue + koa + sequelize 的項目。 由于沒有百度貼吧API接口，所以自己寫了后端 項目部分截圖（GIF） showImg(https://user-gold-cdn.xitu.io/2019/7/13/16bea513a0805b84?w=480&h=1040&f=gif&s=4456077);showImg(https://user-gold-cdn.xi...
閱讀 3025·2021-11-23 09:51
閱讀 3625·2021-10-13 09:39
閱讀 2513·2021-09-22 15:06
閱讀 894·2019-08-30 15:55
閱讀 3165·2019-08-30 15:44
閱讀 1794·2019-08-30 14:05
閱讀 3450·2019-08-29 15:24
閱讀 2373·2019-08-29 12:44
