ios h5 点击事件失效及点击延迟

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/)

 

将 click 事件直接绑定到目标元素（即 .target）上

将目标元素换成 <a> 或者 button 等可点击的元素

将 click 事件委托到非 document 或 body 的父级元素上

给目标元素加一条样式规则 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。 这个属于简单粗暴型的，虽然看似完美，但有一个致命的缺陷，当你必须完全禁用缩放来达到目的时候，就傻眼了，只有特定场景下的交互界面，此方案才可行，其它大多数情况，此法都不可行。 另外：<a href="http://www.oicqzone.com/hot/%3Ca%20href=" http:="" www.oicqzone.com="" hot="" chrome_6494_1.html'="" target="_blank" style="color: rgb(37, 110, 177); text-decoration-line: none;">chrome_6494_1.html' target='_blank'>Chrome 开发团队不久前宣布，在 Chrome 32 这一版中，他们将在包含 width=device-width 或者置为比 viewport 值更小的页面上禁用双击缩放。当然，没有双击缩放就没有 300 毫秒点击延迟。

 

3.从根本解决——input框自动获取焦点

如果没有通过某种用户交互，手机不会（触发软键盘弹起）。非用户交互的当下触发focus，但设置另一个元素的onClick事件，就能把focus事件带起来。

 

意思就是，用户进入页面后，必须有一次和用户的交互，之后才能自动获取焦点并弹出软键盘。

举个例子：

比如我现在有input框，想让它自动获取焦点，并弹出软键盘，但是不能一进页面就让他获取焦点，这种行不通，因为没有用户交互，但是如果说，这个input框开始的时候是隐藏的，我点击其他地方，让input框显示，并且使其获取焦点，弹出软键盘，这个方式就是可行的，因为中间存在一次用户交互。

 

实在抱歉，之前误导了很多同学，在此对大家伙说一声抱歉。

下面的解决方案在我们项目里可以用，也是因为上面的原因。

 

      在做项目的过程中，需求文档有个要求是，当进入页面后，第一个行input框要自动获取焦点，并弹出数字软键盘。

           个人认为这个问题，大家做移动端的时候应该会遇到，今天拿出来说说我们遇到的这个小bug。

 

一个相对很简单的需求，但是值得记录一下，因为在此我们还是遇到了一些hack的。

先说一下上面的这个问题的基础解决方案：

         autofocus 属性   :   文本输入字段被设置为当页面加载时获得焦点

 

         <input type=”tel” autofocus=”autofocus”>  这一行代码其实就够了！

 

但是问题来了、、

 

问题点：

       android系统下

         QQ、uc浏览器，input输入框中需要页面进入即自动弹出数字软键盘，利用input标签属性autofocus=”autofocus”，经真机测试，依然无法弹出软键盘。

 

解决方案：

         1、利用要获得焦点的input框添加一个focus()，此方法在chrome浏览器下无任何问题，但是在QQ、uc浏览器下虽然获取了焦点，但是无法弹出数字软键盘。

 

         2、利用setTimeOut()开一个定时器的方法，但是，android手机参差不齐，性能问题严重，不可控以及容错率太低，所以此方法比较不靠谱，不建议使用。

 

         3、利用trigge()方法，对要获得焦点的input框，调用一次”click”事件，既可解决上述问题。

 

              xxxxxxxx.el.find(‘#c_payment_cardbin_input’).trigger(“click”).focus()；

以上就是我们此次项目的解决方案，网上查了一些能很好的解决万恶的Android机兼容性问题。