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=" 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先尝试一下，看看能不能解决点击无反应的问题。