最近為手術護理系統增加了一個菜單管理的頁面,該頁面由一個數字輸入框,修改按鈕,刪除按鈕,以及折疊面板組成。

輸入數字點擊保存排序會更換順序,修改可以修改URL地址,圖標Icon等,在開發過程中發現一個問題,當我點擊修改的時候,同時會觸發折疊面板的開啟關閉事件,這里考慮是事件冒泡的問題。
事件冒泡,通俗一點解釋,就是當你為父子元素設置了點擊事件,點擊子元素,父元素也會觸發,因為子元素是被包含在父元素之內的,點擊子元素的時候,父元素也同時被點擊了。

而點擊父元素的時候卻不會觸發子元素。我們解決這個問題的方法是,js中有一個stopPropagation函數,jq也可以使用return false來阻止事件冒泡,而在vue中就非常簡單了,只需要在事件的后面加上.stop,這個事件就不會向上冒泡了。
了解更多事件冒泡知識點擊這里。
下一篇: 如何搜索英文時搜索時不區分大小寫



