微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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试试,看还有没有问题

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐