iOS Safari 点击事件无效
我久远的记忆中,自己曾经碰上过这一问题,只是后来没再怎么接触移动端的 Web,就又忘了干净。
这一次是这样的,我的 blog 点击左上图标,会从左侧拉出一块导航,并且会有个 overlay 层覆盖住,点击 overlay 层的话,导航会收回去。
但 iOS 上的 Safari 里,点击 overlay 层是没有反应的。
JavaScript 代码如下:
$(document).on('click', '.overlay', function() { $('html').toggleClass('cs-app--open');});
一个简单粗暴的解决办法是,把事件同样绑定给 touchstart
或 touchend
事件:
$(document).on('click touchstart', '.overlay', function() { $('html').toggleClass('cs-app--open');});
但这样如果页面要滚动就没办法了。
另外一个办法,由 iOS Developer library 提供:
<div class = 'overlay' onclick = 'void(0)'></div>
通过增加一个空的 onclick
事件处理器,我们让该 div 块可以点击了。
最后还有一个办法,是给 .overlay
声明一个 CSS 规则:
.overlay { cursor: pointer; }
相比之下,我显然倾向最后一个方法。
再来说原因。
iOS 上,屏幕是触碰的,所以页面元素默认会有 touch
一类事件,而不是 click
。也就是说,我点击上面的 .overlay
元素时,iOS 上的 Safari 冒泡的是 touch
一类事件,而不是 click
。只有两类元素,链接与 input 输入域才有 click
事件,但通过 cursor: pointer
及 onclick=
代码我们又可以给其它元素变得可点击。这是 iPhone 上的 Safari 有别与其它浏览器的地方。
扩展阅读
Click event delegation on the iPhone
Making Elements Clickable
附:如果你有在页面上使用 FastClick,则上面的问题已经顺带解决,不需要我们操心。