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

最新推荐文章于 2023-03-03 15:37:44 发布
最新推荐文章于 2023-03-03 15:37:44 发布
阅读量2k 收藏
点赞数
分类专栏： 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上面了.

linfeng_023
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ios 上h5点击无效_ios手机轻触几下屏幕出现白底的bug
weixin_42137539的博客
12-28 392
场景：安卓和ios需要嵌套我的H5页面，其中html中设置了禁止缩放事件user-scalable=no，也设置成positiona:fixed,bottom:0固定页面，安卓手机上不会出现问题，但是在ios上会出现的问题是点击几下屏幕会出现白边注意：不是一进来页面出现白边，是点击几下屏幕之后底部出现白边的bug，由于没有办法返现出来bug,索性自己画了一下，如下图：后来查了查资料问了问大佬，提供...
H5之12__触摸与单击：基本的事件处理
daozhongyang的专栏
12-04 8031
在HTML5中， 如果基于鼠标的界面互动是单击， 触摸界面的基本交互方式就是 轻触. 一. 轻触与单击有相似之处， 但是也有不同. 即使触摸设备(例如： 手机) 没有鼠标，它们的浏览器仍然会触发鼠标事件， click, mouseover, mousedown 和 mouseup 都还会被触发。 二 移动浏览器有四种类型的触摸事件 事件名称 描
移动H5页面点击事件绑定失效的解决方法
qq_39464730的博客
05-03 6251
最近做了一个H5的小游戏，遇到过页面点击事件在IOS上绑定失效的问题，查询的相关问题后，总结了几种出现问题情况：1、点击事件在IOS上没有绑定成功    原因是在ios系统中,例如document,div,body这些本身并没有可以被点击的属性的元素不能作为托管点击事件的父元素。所以,用这样的方法进行事件托管，ios会获取不到你的document的点击事件，自然无法获取到你想要绑定的元素身上。  ...
iOS端内嵌H5页面 点击a标签无反应
joe0235的博客
01-28 4352
问题1： iOS端内嵌H5页面，点击a链接无反应 解决： 一般这种问题发生在新窗口打开的情况下，也就是说 target 的值为 _blank 时会发生这个问题，改为 _self即可解决问题。或者iOS的用户长按链接也是可以打开链接的，不过是跳转到了浏览器。 问题2： 如果点击的模块不是a标签或者button 解决： 需要给他加上cursor: pointer的样式。 第二种解决方案是将click事件替换为touchstart事件，或者click事件与touchstart事件并存： $(document
vue踩坑之H5页面在ios的webview里面，长时间放到后台按钮失灵
weixin_45630548的博客
03-03 1051
在ios上应用切到后台后，再次进入会因为加载打包后的某些文件加载失败导致页面中的跳转按钮失灵
ios 上h5点击无效_ios h5 点击事件失效及点击延迟
weixin_35945480的博客
12-23 1036
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 种可供选...
h5点击事件在ios上无效的问题
江湖的博客
03-20 3089
为<span></span>绑定了click事件，嵌入ios app后点击无效 解决方式：为span 添加css样式解决，元素变成了可点击的了 cursor: pointer;
详解h5页面在不同ios设备上的问题总结
12-13
在开发H5页面时，尤其是当页面需要在iOS设备上运行时，开发者常常会遇到一些兼容性问题。本文主要总结了在不同iOS设备上，特别是嵌入到小程序Webview中的H5页面所遇到的一些典型问题及其解决方案。 1. **日期问题**...
jquery单选框radio绑定click事件实现方法
10-24
本篇文章将详细讲解如何使用jQuery为单选框（radio）绑定click事件，以便在用户点击单选框时，能够根据所选值执行相应的操作。 首先，jQuery的选择器功能强大，可以方便地选取页面中的特定元素。在示例代码中，`$(...
解决vue的touchStart事件及click事件冲突问题
10-15
主要介绍了解决vue的touchStart事件及click事件冲突问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
h5复制到剪切板兼容ios浏览器
03-25
ios+android+h5复制剪切板
解决ios下h5锁屏时倒计时停止问题
10-15
在iOS平台上，H5应用面临一个独特的问题：当设备被锁定或进入后台模式时，JavaScript引擎将暂停执行，导致依赖JavaScript的实时功能，如倒计时、定时任务等，会停止工作。这个问题对于那些需要在后台持续运行的任务...
总结：苹果系统H5页面软键盘弹出造成点击事件失效
apoju0424的博客
07-30 2308
问题描述：苹果系统，软键盘弹出，键盘再收起时，原虚拟键盘位点击事件无效。 排查过程：只有iphonex、iphone6，ihpone7等部分机型会出现该问题； 原因：在IOS下，点击页面中的input时，弹出软键盘时，如果input比较靠下，整个页面会上移，document.body.scrollOffset会由0变成大于0。 软键盘消失后，页面会下移。但是document.body...
vue h5页面 解决touchstart，touchmove，touchend，click事件触发产生的问题
maoyuanh的博客
02-15 4074
我的思路是，触发touchstart方法的时候延迟200毫秒如果是就是触摸事件，否则在touchend里面判断就是点击十点，调用点击事件的方法即可。当你的需要即要求可以完成触摸事件，又要求有点击事件的时候，我们要搞清楚一个问题，事件触发的排序问题。
移动端click事件延迟300ms到底是怎么回事，该如何解决？
wfly blog
09-25 628
问题由来 双击缩放(double tap to zoom)，这也是会有上述 300 毫秒延迟的主要原因。双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢？ 假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，...
H5移动端常用事件，此中大有文章
欧阳的技术博客
06-25 802
移动端事件，封装自定义事件1. 移动端事件2. 封装移动端自定义事件3. FAQ 1. 移动端事件 首先，移动端不建议使用 click 事件 因为它有300毫秒的延迟，对用户体验不太友好 常用事件：touchstart()，touchend()，touchmove() HTML文件 <!DOCTYPE html> <html lang="ZH-cn"> <head> <meta charset="utf-8">
iOS开发经验：button不能响应的原因
mingming24的专栏
04-21 1240
iOS开发起初对button的印象就是点击，只要设置了响应方法，就可以有所响应，但是后来发现未必，下面把经历过几种button不能响应的情况，列举一下： 1. button所在视图不能响应的，这个好理解，父视图都不让点击，你从属于它就得听他的； 2. button设置的alpha=0，这个很容易忽略，这个时候因为button处于透明状态，也是无法响应 ，貌似要大于0.01才会有
IOS微信浏览器内H5页面点击事件失效
helloschurmi的博客
08-08 6144
在微信浏览器内的H5页面，当触发点击事件时有时会失效，点击没有效果，或者点击事件错位，其实这是因为在小屏幕上，在点击输入框弹出键盘 键盘回缩 后定位没有相应改变 也就是说，其实是input聚焦后页面被顶起，然后失焦后页面回位，但是这里只是视觉上回位了，window其实已经被顶上去一定的距离。你再次点击页面时就已经错位了，视觉上的点击事件触发按钮其实不是真正的按钮位置，所以点击时不会生效，而是在...
在h5页面禁止ios的惯性回弹问题
最新发布
04-05
可以通过以下方法来禁止iOS的惯性回弹： 1. CSS样式禁止惯性滚动： ``` body { overscroll-behavior: none;...以上方法可以在h5页面的body元素上直接设置，或者在需要禁止惯性回弹的具体元素上设置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值