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 提供：

经过增长一个空的 onclick 事件处理器，咱们让该 div 块能够点击了。

最后还有一个办法，是给 .overlay 声明一个 CSS 规则：

.overlay { cursor: pointer; }
相比之下，我显然倾向最后一个方法。

再来讲缘由。

iOS 上，屏幕是触碰的，因此页面元素默认会有 touch 一类事件，而不是 click。也就是说，我点击上面的 .overlay 元素时，iOS 上的 Safari 冒泡的是 touch 一类事件，而不是 click。只有两类元素，连接与 input 输入域才有 click 事件，但经过 cursor: pointer 及 onclick= 代码咱们又能够给其它元素变得可点击。这是 iPhone 上的 Safari 有别与其它浏览器的地方。