click事件在ios端的坑-移动开发

在查看日志时发现有的ios微信端的event事件没有发出来，但也不是全部，比如用iphone5 sarifi测试是好的（貌似出现过一次发不出的情况）223.104.165.149 - - [16/Apr/2021:17:39:07 +0800] POST /coupon/h5/list HTT...

在查看日志时发现有的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试试，看还有没有问题