iOS下瀏覽器document/body的click事件無效的坑

最近要在一個移動端頁面上新增一個下拉列表，點擊下拉，而後點擊頁面任何位置列表收回，這個功能很簡單，在PC端也實現過不少次，基本思路就是在document/body上綁定click事件，觸發時隱藏下拉列表。

開發時一切正常，在Chrome的模擬手機瀏覽器上測試也一切正常，可是在iOS下的Safari上測試，列表能夠展開，在頁面任意位置點擊收回的功能卻失效了。

Chrome模擬手機瀏覽器上一切正常，真機卻有問題，在網上搜索的調試方法基本上都須要Mac（流下了貧窮的眼淚），只能一點一點修改js來調試了。

首先的思路就是排除其餘變量，我在一個測試頁面上實現了相同的下拉表單，並在document/body上綁定了click事件，而後發現一切正常。

這就更尷尬了，難道是其餘部分js的影響嗎，檢查以後發現沒有其它document/body相關的操做（此處消耗了大量的時間，而且是無用功），只能面向谷歌/百度編程了，網上的建議以下：

• 將 click 事件委託到非document或body的父級元素上。
  這是有效的，若是將body與body內的所有元素之間加一層div，而後將以前綁定到document或者body的事件綁定在此div上，功能就正常了。
• 給目標元素加一條樣式規則 cursor: pointer。
  首先沒法給document上加樣式規則，可是給body加此樣式規則的話，功能就正常了，緣由是iOS的瀏覽器下的document和body在加上cursor: pointer這個樣式規則後，被認爲是可點擊元素，也就能夠觸發click事件了。
  網上說只有a和btn被認爲是可點擊元素，通過測試，只有document和body是特殊元素，須要加cursor: pointer才能夠觸發click事件，其餘元素都可以正常觸發click事件。
• 綁定touchstart事件。
  這個也是有效的，在移動端touchstart事件老是能夠被觸發的，因此能夠將click事件替換爲touchstart事件。若是須要作響應式頁面，針對PC端和移動端同時優化的話，好比在jQuery下，可使用$(document).on('click touchstart', function() {// do something...})。

其實問題到這裏就解決了（若是就這麼解決我也不會寫這篇文章了-_-||），可是總有個問題在我心頭揮之不去，爲何以前個人測試功能頁面只在document綁定click就一切正常，正式頁面卻不行呢，兩個頁面明明沒什麼區別，這個問題不解決怎麼能算是學到東西了呢。

對着兩個頁面苦思冥想了半個小時，忽然靈光一閃：頁面長度不同！！！我試着在測試功能頁面加了一堆br將頁面撐開到超過一屏，而後測試功能頁面就出現一樣的問題啦。

因此推論以下，iOS下的瀏覽器，觸發document/body的click事件時，若是頁面超過一屏，會認爲這是網頁雙擊向下翻頁的第一次點擊，這屬於瀏覽器的默認行爲，咱們本身定義的click事件就失效了。可是若是頁面都沒有超過一屏，這個翻頁的默認行爲不存在，咱們本身定義的click事件就能夠執行了，大功告成~