在編寫功能時總是會出現很多意想不到的問題，現在就講講我遇到的兩個問題，通過舉一個相似的例子來解說。 <1> 元素互相獨立，不存在包含於被包含 選擇城市的按鈕，為它綁定點擊事件，點擊後就彈出城市列表層，城市列表層設置了position與z-index的值來進行佈局，然後再點擊選擇城市按鈕，點擊事件就不 ...
在編寫功能時總是會出現很多意想不到的問題，現在就講講我遇到的兩個問題，通過舉一個相似的例子來解說。
<1> 元素互相獨立，不存在包含於被包含
選擇城市的按鈕，為它綁定點擊事件，點擊後就彈出城市列表層，城市列表層設置了position與z-index的值來進行佈局，然後再點擊選擇城市按鈕，點擊事件就不起作用了，反而是城市列表層的點擊事件起作用，這說明只有顯示在最上面的一層綁定的事件可以起作用，即使最上面的一層沒有全部蓋住下麵的內容，下麵的內容綁定的事件也不起作用，所以要想讓選擇城市按鈕綁定的點擊事件起作用，就需要為其設置position與z-index值，而且z-index值必須要大於城市列表層設置的z-index的值。
總結：當整個頁面有元素設置position與z-index的值時，為元素綁定事件，只有顯示在最上面一層的元素的事件可以起作用。
<2>元素存在包含關係
這個問題和第一個問題有點相似，但又有點不同。城市列表裡有多個城市，需要使用事件冒泡取到事件目標，即點擊的城市，每個城市都被包含在城市列表裡了，雖然城市列表這個上級元素已經設置了position與z-index的值，但這並不意味著子元素就和父級元素在同一層，所以在使用事件冒泡獲取事件目標，即子元素時，根本取不到子元素，取到的依然是父級元素，說明子元素與父級元素不在同一層，這個怎麼解決呢？我發現只要為子元素設置position:relative就可以獲取到，而且不需要再設置z-index的值了。
總結：當父級元素設置了position與z-index的值，子元素也需要設置position的值，不然事件冒泡獲取事件目標時，取不到子元素。
目前我還沒想明白為什麼當為子元素設置position:relative就可以使得其與父級元素在一層，從而事件冒泡獲取事件目標就可以獲取到。如果有知道此原理的園友，歡迎在評論區回覆，謝謝，大家一起探討和學習。
