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 有別與其它瀏覽器的地方。