ios 上h5点击无效_ios h5 点击事件失效及点击延迟

悠悠 2022-12-31 11:25 606阅读 0赞

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

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

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

给目标元素加一条样式规则 cursor: pointer;

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

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

2.click事件的300ms延迟

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

粗暴型：禁用缩放

关键是 user-scalable = no。 这个属于简单粗暴型的，虽然看似完美，但有一个致命的缺陷，当你必须完全禁用缩放来达到目的时候，就傻眼了，只有特定场景下的交互界面，此方案才可行，其它大多数情况，此法都不可行。 另外：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 属性   :   文本输入字段被设置为当页面加载时获得焦点

这一行代码其实就够了！

但是问题来了、、

问题点：

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机兼容性问题。

标签： h5

顶一下

(1638)

98.1%

踩一下

(32)

1.9%

发表评论取消回复

表情：

评论列表（有 0 条评论，606人围观）

还没有评论，来说两句吧...

相关阅读

相关动态创建节点，点击事件失效

迎大家一起交流学习n(\*≧▽≦\*)n **on前面的元素在页面加载时就已经存在** 方法一： $("circle").on('cli...

悠悠/ 2024年04月18日 18:26/ 0 赞/ 74 阅读

相关点击按钮失效5秒

<input type="button" value=" 失效5秒 " id="me" οnclick="this.disabled=true;setTimeout('me.d

╰半夏微凉°/ 2024年02月17日 20:05/ 0 赞/ 56 阅读

相关 ios端的H5页面点击输入框页面自动放大

H5页面，苹果手机点击input搜索框，输入内容时，页面会自动放大。解决： <meta name="viewport" content="width=device-wid

待我称王封你为后i/ 2023年06月15日 13:28/ 0 赞/ 12 阅读

相关 ios 上h5点击无效_ios h5 点击事件失效及点击延迟

1.ios h5 app avalon tap事件失效使用MUI制作app界面,使用avalon.js渲染数据,发现在(Android上正常)ios上运行时容器div的av

悠悠/ 2022年12月31日 11:25/ 0 赞/ 607 阅读

相关 vue 点击事件失效

点击事件失效的情况，总共有三种 1. 没有点到那个元素，比如说div>span 事件绑定在div上，但是它可能点来点去是在span标签上面，这种情况，把@click点击事件绑

淡淡的烟草味﹌/ 2022年12月20日 03:14/ 0 赞/ 381 阅读

相关 html5 自动点击事件,HTML5 自定义点击事件

HTML5 自定义点击事件 /\封装的TAP事件\/(function() \{/\\ \ IOS 和 PC 端只需要创建一次就能一直使用 \ Android 手机每

分手后的思念是犯贱/ 2022年10月06日 08:59/ 0 赞/ 344 阅读

相关 iOS Safari 中点击事件失效的解决办法

问题描述当使用委托给一个元素添加`click`事件时，如果事件是委托到 `document` 或 `body` 上，并且委托的元素是默认不可点击的（如 `div`, `

忘是亡心i/ 2022年10月01日 01:51/ 0 赞/ 188 阅读

相关点击事件

javascript教程 function displayDate()\{ document.getElementById("demo").inner

朴灿烈づ我的快乐病毒、/ 2022年06月08日 02:07/ 0 赞/ 328 阅读

相关 iOS 扇形点击位置

1.先创建一个view试图 \import <UIKit/UIKit.h> @interface Draw : UIView @end

浅浅的花香味﹌/ 2022年06月02日 10:05/ 0 赞/ 296 阅读

相关 Vue点击事件失效

在做项目时给button添加click事件，发现没反应，但另外写了一个button添加同样的事件，却能触发。原因是使用了better-scroll，默认它会阻止touch

àì夳堔傛蜴生んèń/ 2022年05月03日 02:30/ 0 赞/ 710 阅读