最近為手術(shù)護(hù)理系統(tǒng)增加了一個(gè)菜單管理的頁(yè)面，該頁(yè)面由一個(gè)數(shù)字輸入框，修改按鈕，刪除按鈕，以及折疊面板組成。

輸入數(shù)字點(diǎn)擊保存排序會(huì)更換順序，修改可以修改URL地址，圖標(biāo)Icon等，在開(kāi)發(fā)過(guò)程中發(fā)現(xiàn)一個(gè)問(wèn)題，當(dāng)我點(diǎn)擊修改的時(shí)候，同時(shí)會(huì)觸發(fā)折疊面板的開(kāi)啟關(guān)閉事件，這里考慮是事件冒泡的問(wèn)題。

事件冒泡，通俗一點(diǎn)解釋?zhuān)褪钱?dāng)你為父子元素設(shè)置了點(diǎn)擊事件，點(diǎn)擊子元素，父元素也會(huì)觸發(fā)，因?yàn)樽釉厥潜话诟冈刂畠?nèi)的，點(diǎn)擊子元素的時(shí)候，父元素也同時(shí)被點(diǎn)擊了。

而點(diǎn)擊父元素的時(shí)候卻不會(huì)觸發(fā)子元素。我們解決這個(gè)問(wèn)題的方法是，js中有一個(gè)stopPropagation函數(shù)，jq也可以使用return false來(lái)阻止事件冒泡，而在vue中就非常簡(jiǎn)單了，只需要在事件的后面加上.stop，這個(gè)事件就不會(huì)向上冒泡了。

了解更多事件冒泡知識(shí)點(diǎn)擊這里。