ios下click失效小記

前言

今年都在寫移動端頁面，可是大多數用的都是框架，不多出現事件兼容問題。今天用原生寫了個ios的頁面，事件兼容花了約120'，必需要記錄一下。

click事件兼容

正常解決ios上click事件失效方法有這幾個方法：

• 添加cursor: pointer;這個屬性（主要針對div、span）等不可點擊的元素
• 把目標元素改爲a、button標籤
• 把click事件換成touchstart或touchend事件，（配合使用e.preventDefault）
• ​將 click 事件委託到​​​​​非 document 或 body 的​​父級元素上

我自己使用的就是事件委託，但挨個試了，依舊沒有效果，想到家裏的娃娃，淚奔~。
可是本着一個僞程序媛bug沒有改完怎麼能下班的精神，仍是繼續找緣由。

分析方法

• 經常使用click事件失效解決方法 —— 無效
• a 標籤直接點擊 —— 正常
• 目標元素換成a標籤 —— 無效

這樣下來，只能是個人方法可能存在某些問題，繼續分析：

• 改爲事件捕獲 —— 無效
• 改爲事件冒泡 —— 無效
• 部分事件捕獲部分冒泡 + 事件一開始先彈alert —— alert正常彈出

問題找到了，確定某行代碼報錯了，一行一行找。
最後問題是：我用event對象中的path屬性，可是在safari中爲undefined
解決方案：

const path = event.path || (event.composedPath && event.composedPath());

在fireFox下好像也有這個問題，我沒有親測，不肯定。

原本想查Android和iphone下event具體差異，奈何今天沒有時間了，明天補上。

後記

但願將來某一天，某家瀏覽器一統天下，解放咱們這些前端狗。哈哈哈

歡迎跟我一塊兒挖坑、填坑，哈哈哈