文科少女學程式

這陣子在做內部專案要用的元件，像是radio、checkbox，其中在製作有縮合功能的checkbox時，卻碰到了一個狀況，那就是label裡面包著必須包著一個有縮合功能的icon，但點選這個icon時，卻不能選取到這個checkbox。其實要解決這個問題很簡單，但我當下一時腦袋打結了，還以為必須使用什麼神奇的黑魔法，其實只要回歸根本原理開始解決就好了。雖然這個情境的解法應該算是滿直覺的，但是我想應該也還是有一些人在初次遇到這個狀況時，會有一時想不透的點，所以也就特別記錄下來了。

點擊input label區域不觸發input事件
實作情境
最終期待的結果如同以下這樣。

但是如果單純在icon上v-bind click事件，卻會變成以下這個狀況。



問題發生原因&解決方式
為什麼會發生這個問題？
這個狀況和HTML tag自己本身的預設行為有關(像是 a, input等這些tag都有預設的行為)，因為label和input已經結合在一起了，所以點擊到label範圍內，當然也就會觸發input的預設事件，這裡type是checkbox，當在點擊被包含在label裡面的icon時，check就會有被點選和取消點選的效果。

怎麼解決這個狀況？
為了阻止這個狀況，在Vue的世界裡，可以使用Vue的事件修飾符.prevent，來阻止這個tag的預設事件發生，使用方式像是這樣。

如果不是使用Vue，想要處理這樣的狀況，則是可以用event.preventDefault()來處理，像是寫成以下這樣。


範例內容在這裡

這個狀況真的算滿初級的，但小女子太不才，又耍笨了QQ。不過換個角度想，這次耍笨完後，就不會再耍同樣的笨了(言下之意，還會再耍其他笨XD)

貼心小提醒！！
因為是亂亂寫筆記，真的就是純紀錄之前實作時，如何解決曾經卡住過的問題，所以主要都是解決問題的方式為主，不會有太多詳細說明。