資訊專(zhuān)欄INFORMATION COLUMN
摘要：通用解決辦法事件冒泡了嘛，那就阻止事件冒泡唄。很完美有沒(méi)有，這就不用在事件響應(yīng)邏輯中去處理事件細(xì)節(jié)了。
冒泡的表現(xiàn)
近期用vue做了一個(gè)需求，大概是同一個(gè)區(qū)域，點(diǎn)擊不同位置有不同的響應(yīng)函數(shù)，還有個(gè)總的響應(yīng)函數(shù)，好吧，如下圖所示:
他們的DOM結(jié)構(gòu)如下:
冒泡在這里的表現(xiàn)就是當(dāng)用戶點(diǎn)擊圖中事件1或事件2區(qū)域時(shí)，事件3也會(huì)執(zhí)行。這是因?yàn)闀r(shí)間冒泡機(jī)制，導(dǎo)致點(diǎn)擊"handleClick1"時(shí)"handleClick3" 也會(huì)響應(yīng)。在大部分的時(shí)候這都是不希望的， 同樣我這里也不希望。
看下冒泡的經(jīng)典描述吧還是
圖中4，5，6，7步驟就是冒泡階段。
以前做法太傻了，用一下事件委托就好了嘛！用事件委托。
通用解決辦法事件冒泡了嘛，那就阻止事件冒泡唄。 鑒于不同瀏覽器阻止事件冒泡方法不一樣，建議手寫(xiě)一個(gè)事件阻止冒泡方法.
function stopPropagation(event){
var e=arguments.callee.caller.arguments[0] || event;//這里是因?yàn)槌薎E有event其他瀏覽器沒(méi)有所以要做兼容
if(window.event){ //這是IE瀏覽器
e.cancelBubble=true;
}else if(e && e.stopPropagation){ //這是其他瀏覽器
e.stopPropagation();//阻止冒泡事件
}
}
// 使用
vue中解決辦法
上述兼容方法，針對(duì) event 和 停止冒泡方法均做了兼容。 但是在vue中需要在內(nèi)聯(lián)語(yǔ)句處理器中訪問(wèn)原始的 DOM 事件。可以用特殊變量 $event 把它傳入方法。如:
// ...
methods: {
warn: function (message, event) {
// 現(xiàn)在我們可以訪問(wèn)原生事件對(duì)象
if (event) event.preventDefault()
alert(message)
}
}
因此這里我們可以簡(jiǎn)化一下上述停止冒泡方法:
function stopPropagation(event) {
if(event) {
event.stopPropagation ? event.stopPropagation(): event.cancelBubble = true;
}
}
evnet 為 $event
vue中處理冒泡標(biāo)準(zhǔn)姿勢(shì)
事件修飾符
Vue.js 為 v-on 提供了事件修飾符，修飾符是由點(diǎn)開(kāi)頭的指令后綴來(lái)表示的。這些事件修飾符主要有以下幾個(gè):
stop
prevent
capture
prevent
self
once
passive
看到?jīng)]有，第一個(gè)"stop"就是我們想要的!
這些修飾符正是為了解決這些問(wèn)題而生的。也就說(shuō)我們只需要在模板中這樣寫(xiě)就搞定停止冒泡了。
很完美有沒(méi)有，這就不用在事件響應(yīng)邏輯中去處理dom事件細(xì)節(jié)了。
除 冒泡之外，vue提供的修飾符還有這些功能。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/96523.html
摘要：事件句柄的新特性之一是能夠使事件觸發(fā)瀏覽器中的行為，比如當(dāng)用戶點(diǎn)擊某個(gè)元素時(shí)啟動(dòng)一段。下面是一個(gè)屬性列表，可將之插入標(biāo)簽以定義事件的行為。鍵盤(pán)事件的代碼鏈接其他基礎(chǔ)使用一 本文主要簡(jiǎn)述了event 對(duì)象，順便復(fù)習(xí)了一下事件句柄 (Event Handlers)，鍵盤(pán)的一些屬性，以及最容易遇到的事件冒泡，同樣的阻止事件冒泡，在vue 下是怎樣解決的，vue 提供了那些方便去阻止事件冒泡。...
摘要：事件句柄的新特性之一是能夠使事件觸發(fā)瀏覽器中的行為，比如當(dāng)用戶點(diǎn)擊某個(gè)元素時(shí)啟動(dòng)一段。下面是一個(gè)屬性列表，可將之插入標(biāo)簽以定義事件的行為。鍵盤(pán)事件的代碼鏈接其他基礎(chǔ)使用一 本文主要簡(jiǎn)述了event 對(duì)象，順便復(fù)習(xí)了一下事件句柄 (Event Handlers)，鍵盤(pán)的一些屬性，以及最容易遇到的事件冒泡，同樣的阻止事件冒泡，在vue 下是怎樣解決的，vue 提供了那些方便去阻止事件冒泡。...
這個(gè)百度貼吧的項(xiàng)目是 vue + koa + sequelize 的項(xiàng)目。 由于沒(méi)有百度貼吧API接口，所以自己寫(xiě)了后端 項(xiàng)目部分截圖（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...
閱讀 2979·2021-11-23 09:51
閱讀 3609·2021-10-13 09:39
閱讀 2493·2021-09-22 15:06
閱讀 881·2019-08-30 15:55
閱讀 3147·2019-08-30 15:44
閱讀 1778·2019-08-30 14:05
閱讀 3434·2019-08-29 15:24
閱讀 2362·2019-08-29 12:44
