ios h5 app avalon tap点击事件失效及点击延迟300ms问题解决方法

时间:2022-05-28 11:13:06

1.ios h5 app avalon tap事件失效

使用MUI制作app界面,使用avalon.js渲染数据,发现在(Android上正常)ios上运行时容器div的avalon的ms-on-tap被内容遮住不执行.用MUI的on tap事件可以执行但改动较大,于是改为ms-on-click.(但是click事件有300ms延迟,解决方法在标题2处),搜索到以下解决方法:

解决办法有 4 种可供选择:(来自:https://happycoder.net/solve-ios-safari-click-event-bug/)

  1. ​将 click 事件直接绑定到目标​元素(​​即 .target)上
  2. 将目标​元素换成 <a> 或者 button 等可点击的​元素
  3. ​将 click 事件委托到​​​​​非 document 或 body 的​​父级元素上
  4. ​给​目标元素加一条样式规则 cursor: pointer;

​推荐后两种。从解决办法来看,​推测在 safari 中,不可点击的元素的点击事件不会冒泡到父级元素。通过添加 cursor: pointer 使得元素变成了可点击的了。

最终使用第4种方法解决掉.

2.click事件的300ms延迟

解决方法如下:(来自:http://www.xiaomeiti.com/note/3585)

粗暴型:禁用缩放 
<meta name="viewport" content="width=device-width, user-scalable=no">

关键是 user-scalable = no。
这个属于简单粗暴型的,虽然看似完美,但有一个致命的缺陷,当你必须完全禁用缩放来达到目的时候,就傻眼了,只有特定场景下的交互界面,此方案才可行,其它大多数情况,此法都不可行。 另外:Chrome 开发团队不久前宣布,在 Chrome 32 这一版中,他们将在包含 width=device-width 或者置为比 viewport 值更小的页面上禁用双击缩放。当然,没有双击缩放就没有 300 毫秒点击延迟。

From:http://www.cnblogs.com/xuejianxiyang/p/5824640.html