H5绑定的click事件在ios上失效的问题

最新推荐文章于 2024-08-06 09:51:20 发布
最新推荐文章于 2024-08-06 09:51:20 发布
阅读量2.3k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： HTML5 文章标签： vue ios html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linfng023/article/details/99848164

H5绑定的click事件在ios上失效的问题

项目中遇到的问题,在做H5下拉菜单时,需要在点击空白处就隐藏菜单,于是就给document绑定了click事件
在这里插入图片描述
但是绑定的事件却只能在pc端和android上才能生效使用,在ios上就失效了,在网上搜索了此类的问题,大概就是ios系统上,document,body或div这些元素默认是不能被点击,所以当把click事件委托给这些元素时,在ios上就会失效!

解决方式:可以在你给绑定click事件的元素上设置css样式:cursor:pointer;

在这里插入图片描述
我是在document上绑定的事件,所以样式就设置在body上面了.

h5页面苹果手机不兼容普通点击事件
zzz_zed的博客
06-14 7884
在代码里面写了一个回到顶部的方法，电脑测试 和安卓手机测试完全没问题，在苹果手机上面就会出现点击不会跳转到顶部，反而会向下移一点点； 代码如下（js添加节点并添加点击事件）： js: if ($('#mkFixedTools').length > 0) { $("<div class='tool-toTop hide'></div>").app...
h5事件监听
qq_36545656的博客
08-27 2512
问题：点击div(或弹框)外的任何区域div(或弹框)消失 前情提要： 项目是用angular写的移动端页面，测试反馈点击确认按钮每次都要点击2次才生效，体验很不好，需要优化。页面如下图所示：点击金额输入框键盘出现输入金额，键盘是单独封装的组件，点击页面其他地方键盘消失。 定位问题： 当测试跟我说的时候，我第一反应是是不是点击有延迟啊，然后我亲自测了一遍，发现有键盘出现的时候需要点2次...
ios 上h5点击无效_ios h5 点击事件失效及点击延迟
weixin_35945480的博客
12-23 1265
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 种可供选...
ios click事件失效
lylongqq的博客
09-08 627
当使用委托给一个元素添加click事件时，如果事件是委托到document或body上，并且委托的元素是默认不可点击的（如 div, span 等），此时 click 事件会失效。 解决办法有 4 种可供选择：  ​1、将 click 事件直接绑定到目标​元素（​​即 .target）上 2、将目标​元素换成 或者button等可点击的​元素 ​3、将 click 事件委托到​​​​​非
h5点击事件在ios上无效的问题
江湖的博客
03-20 3164
为<span></span>绑定了click事件，嵌入ios app后点击无效 解决方式：为span 添加css样式解决，元素变成了可点击的了 cursor: pointer;
iOS端内嵌H5页面 点击a标签无反应
joe0235的博客
01-28 4685
问题1： iOS端内嵌H5页面，点击a链接无反应 解决： 一般这种问题发生在新窗口打开的情况下，也就是说 target 的值为 _blank 时会发生这个问题，改为 _self即可解决问题。或者iOS的用户长按链接也是可以打开链接的，不过是跳转到了浏览器。 问题2： 如果点击的模块不是a标签或者button 解决： 需要给他加上cursor: pointer的样式。 第二种解决方案是将click事件替换为touchstart事件，或者click事件与touchstart事件并存： $(document
移动H5页面点击事件绑定失效的解决方法
qq_39464730的博客
05-03 6471
最近做了一个H5的小游戏，遇到过页面点击事件在IOS上绑定失效的问题，查询的相关问题后，总结了几种出现问题情况：1、点击事件在IOS上没有绑定成功    原因是在ios系统中,例如document,div,body这些本身并没有可以被点击的属性的元素不能作为托管点击事件的父元素。所以,用这样的方法进行事件托管，ios会获取不到你的document的点击事件，自然无法获取到你想要绑定的元素身上。  ...
解决vue的touchStart事件及click事件冲突问题
10-15
这样，只有在支持触摸事件的设备上才会绑定touchStart事件，而不支持的设备上将只绑定click事件，从而避免冲突。 以上两种方法可以有效解决vue项目中touchStart事件与click事件的冲突问题，开发者可以根据实际应用...
h5 移动端click失效
02-25
对于H5页面在移动端遇到的Click点击事件失效问题，可以采取多种方法来解决这一难题。 #### 使用 FastClick 库减少延迟并提高响应速度 FastClick 是一种能够有效消除移动设备上点击事件300毫秒延迟的技术[^1]。通过...
iOS和H5页面交互拦截
02-22
用于移动端和前端进行交互，H5页面获取iOS端点击事件，iOS端获取H5点击事件，实现实时交互
h5网页嵌套安卓苹果APP内 微信内打开H5等 遇到的各种适配问题与解决方案汇总 --持续更新
Beatingworldline的博客
08-06 1683
在站外拉起APP 可以用UniversalLinks。在站外拉起APP 可以用scheme协议。微信内可以借用友盟封装uslink实现。微信内可以借用应用宝实现。
uniapp click失效
最新发布
05-08
引用1提到在子组件中绑定click和tap事件无效，解决方案是给每个元素添加点击事件，或者包裹view标签。引用2的解决方法是使用view包裹u-button，并在view上添加事件。引用3指出，父元素包含input时，click事件可能...
IOS微信浏览器内H5页面点击事件失效
helloschurmi的博客
08-08 6421
在微信浏览器内的H5页面，当触发点击事件时有时会失效，点击没有效果，或者点击事件错位，其实这是因为在小屏幕上，在点击输入框弹出键盘 键盘回缩 后定位没有相应改变 也就是说，其实是input聚焦后页面被顶起，然后失焦后页面回位，但是这里只是视觉上回位了，window其实已经被顶上去一定的距离。你再次点击页面时就已经错位了，视觉上的点击事件触发按钮其实不是真正的按钮位置，所以点击时不会生效，而是在...
解决ios系统下h5页面点击事件不触发的问题
L_Taozi的博客
07-02 3680
style="cursor:pointer"onclick="" 在需要添加点击事件的元素上加这段代码就ok
vue踩坑之H5页面在ios的webview里面，长时间放到后台按钮失灵
weixin_45630548的博客
03-03 1345
在ios上应用切到后台后，再次进入会因为加载打包后的某些文件加载失败导致页面中的跳转按钮失灵
ios 上h5点击无效_ios手机轻触几下屏幕出现白底的bug
weixin_42137539的博客
12-28 478
场景：安卓和ios需要嵌套我的H5页面，其中html中设置了禁止缩放事件user-scalable=no，也设置成positiona:fixed,bottom:0固定页面，安卓手机上不会出现问题，但是在ios上会出现的问题是点击几下屏幕会出现白边注意：不是一进来页面出现白边，是点击几下屏幕之后底部出现白边的bug，由于没有办法返现出来bug,索性自己画了一下，如下图：后来查了查资料问了问大佬，提供...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值