click事件在ios端的坑

在查看日志時發現有的ios微信端的event事件沒有發出來，但也不是全部，比如用iphone5 sarifi測試是好的（貌似出現過一次發不出的情況）

223.104.165.149 - - [16/Apr/2021:17:39:07 +0800] "POST /coupon/h5/list HTTP/1.1" 200 1504 "https://www.hjdang.com/coupon/0" "Mozilla/5.0 (iPhone; CPU iPhone OS 14_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/8.0.3(0x1800032c) NetType/4G Language/zh_CN" "-""application/json;charset=utf-8"
223.104.165.149 - - [16/Apr/2021:17:39:08 +0800] "GET /coupon/go/20150318020002597 HTTP/1.1" 302 0 "https://www.hjdang.com/coupon/0" "Mozilla/5.0 (iPhone; CPU iPhone OS 14_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/8.0.3(0x1800032c) NetType/4G Language/zh_CN" "-""-"

還有一部分是只發了option請求

"115.193.11.196 - - [16/Apr/2021:22:02:55 +0800] ""OPTIONS /user/event HTTP/1.1"" 200 0 ""https://www.hjdang.com/"" ""Mozilla/5.0 (iPhone; CPU iPhone OS 14_4_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/8.0.4(0x18000427) NetType/WIFI Language/zh_CN"" ""-""""-"" 115.193.11.196 - - [16/Apr/2021:22:02:56 +0800] ""GET /coupon/go/20150318020002597 HTTP/1.1"" 302 0 ""https://www.hjdang.com/coupon/0"" ""Mozilla/5.0 (iPhone; CPU iPhone OS 14_4_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/8.0.4(0x18000427) NetType/WIFI Language/zh_CN"" ""-""""-"""

還有一部分是發了POST請求，但返回499錯誤

115.204.199.215 - - [23/Apr/2021:13:03:54 +0800] "POST /user/event HTTP/1.1" 499 0 "https://www.hjdang.com/coupon/0" "Mozilla/5.0 (iPhone; CPU iPhone OS 16_4_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/8.0.4(0x18000428) NetType/WIFI Language/zh_CN" "-""application/json;charset=utf-8"

查看下來，安卓端沒問題，ios端有問題。

網上找了一下，有說在點擊事件的元素上加上css：

cursor:pointer;

還有的說觸發事件的標簽必須是<button>和<a>

但我的情況，因為是用quasar，發現在<q-button>,<q-item>上加@click ios端都有問題。這些元素解析成html之后如下

<div tabindex="0" class="q-item q-item-type row no-wrap row justify-center q-item--clickable q-link cursor-pointer q-focusable q-hoverable">
　　<div tabindex="-1" class="q-focus-helper">
　　</div>
　　　　<a target="_blank" href="https://w.dianping.com/cube/evoke/growcps/meituan.html?lch=cps:waimai:1:3b09b3bf95a94ebe069bad9d280d015f:zjhgx001&amp;url=https%3A%2F%2Fclick.meituan.com%2Ft%3Ft%3D1%26c%3D1%26p%3DOWMpZ-uzIFOVe6JyOONs3dXuqV0qcAf-r-KCvHdXiNdKaQuUPz9VlyCTNUSca4IKYpDTVcQ6jdGigbSBhXIlgw5_ROMAvItFuOHKOf2f1hLpKRRBjqr6thv89Xj8zPuZfTgbUvYl-VC8O91-OwA8piizof9JrE-MANkl2OF8rMjPEbQgXiQ1j9B4dVJ6XJPEJLKQVLDk5jmtYGj-qmtV2x4Igp3tJPY_OeLrdhrFzIyO73BU5xClOv29dADGLOuHQdDFfgTr5TkcWueWhxu6LJSMN-VHYRebJpidtyPK55z0EFTlo7i0njKiH7MvJiI2PpfdcNuB_J7FccqMAEDKBkrUMBSL7pVcZgilz3b8LtV8Y1ycBfqk7GLnD9tffLyQgTtKO8lZaFXseZM-COvObZpjK-NT71f-NzX1G5Gvo_1k2Qx3wVBKv0PiR95DBhjJzJRV0n1ldj09MH4116q1yorMCLMnwIYvlPxFew3Go1sKtDO1aIqHhm3l0DCqjiH_RShYXKC-3kn2CcXoWxELdClAyLvz7OzyWrLNnYo2zj5JV6Z5ZBsy9ItoFEaTfeQiRwEiEzOPn-gB75t4rh1PMOmuilGehEm_Xc_UQyhb0Cuvsk_MTa-G5kbDHKUYfdrPA87v5OKAZqx8hv7tXB7e90BcDYsQ-j5EbinHvcwUIxUOB4pVVNXB2NggXFNiyh6D" class="row justify-center items-center bg-secondary q-pa-xs">
　　　　　　<img src="https://coupon-david.oss-cn-shanghai.aliyuncs.com/meituan-waimai-690-390.jpg" class="justify-center items-center" style="width: 95%; height: 95%;">
　　　　</a>
　　</div>

---q-item

 

<button tabindex="0" type="button" role="button" class="q-btn q-btn-item non-selectable no-outline q-btn--unelevated q-btn--rectangle bg-accent text-white q-btn--actionable q-focusable q-hoverable q-btn--wrap" style="font-size: 10px;">
　　<span class="q-focus-helper"></span>
　　<span class="q-btn__wrapper col row q-anchor--skip">
　　　　<span class="q-btn__content text-center col items-center q-anchor--skip justify-center row">
　　　　　　<a target="_blank" href="https://web.hjdang.com/goods/go/c216ZG0zMjQzOTk3Ng==" class="text-white text-weight-bold">去購買</a>
　　　　</span>
　　</span>
</button>

q-button

從chrome開發者工具可以看到每一層都有cursor:pointer; 說明加上也沒用。事件的話也是加在最外層，但就算是click發生在內層，根據事件冒泡原理，應該在外層可以執行到才對。

我猜還是由於移動端對click事件的支持不好有關，網上有說需要button.on("click",...)代替 button.click(),但由於我用的vue框架都是用@click這樣寫所以沒法這么改。

網上是說用vue的click事件在ios端會有延遲，我也不清楚時不是真的延遲（不過event有的Post請求報499錯誤，那可能真的是延遲）。

現在先用@touchstart在移動端代替@click試試，看還有沒有問題

==========================================

關於click事件在移動端的延遲，這個是確定的

According to Google:

...mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

可以用zepto的tap事件來解決，奈何這個沒有模塊話，用的方法類似jquery，用在vue的項目破壞了代碼風格。用fastclick先嘗試一下，看看能不能解決點擊無反應的問題。