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事件就能够执行了，大功告成~