IOS移动端中H5页面用on绑定click无效的解决方法

最新推荐文章于 2024-12-10 15:18:29 发布

原创最新推荐文章于 2024-12-10 15:18:29 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种常见情况：使用ES6的let关键字在某些版本的iOS上导致应用崩溃的问题。通过注释或删除相关代码可以解决该问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

检查代码中是不是有ES6语法，有些版本IOS不支持

图中圈起来的就是ES6语法 let，在手机中直接报错，导致前后所有代码都执行不了，注释掉(删掉)就可以了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

冷暖自知

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

React 实战 | H5页面在苹果IOS系统点击事件失效——软键盘的“锅”

qq_35536883的博客

09-05

1715

最近在开发一个用react开发的微信H5页面。遇到了一个bug，就是当软键盘弹出再收起时，软键盘位置的点击事件失效。刚开始以为是onclick的锅，但是换成onTouchStart还是没有好。而且iphone7 Plus没问题，但是iphone7就可以复现这个bug。原因：在IOS下，点击页面中比较靠下的input时，软键盘弹出，页面会上移，document.body.scrollOffs...

记一次移动端H5开发所遇到的问题与细节,以及ios兼容

想飞的猪的博客

09-14

4098

第一次弄移动端H5项目开发，虽然是简单的页面展示，但也遇到了很多细节问题与兼容问题，尤其是h5视频标签video, 一.移动端禁止缩放兼容 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 主要属性是user-sca...

参与评论您还未登录，请先登录后发表或查看评论

h5点击事件在ios上无效的问题

江湖的博客

03-20

3166

为<span></span>绑定了click事件，嵌入ios app后点击无效解决方式：为span 添加css样式解决，元素变成了可点击的了 cursor: pointer;

ios的H5页面input触发onfocus事件无效解决方案

qq_42484025的博客

07-05

3694

ios的H5页面使用input时，在修改input的value的值时，不会触发onfocus事件。解决方案： <div class="input_type" style="position: absolute; width: 92vw; text-align: left; z-index: 99;" @click="bgcolor('2')">米/秒</div> <...

h5开发， ios的input框focus无效

qq_42341025的博客

07-04

2103

最近遇到，在ios上的h5页面，点击获取验证码按钮，自动聚焦验证码的input，使用 this.$refs.名称.focus()，发现在安卓有效， ios无效通过检查得知： focus() 如果在promise或者定时里面调用，在ios上是无效的，记录一下 ...

优化移动端H5：常见问题与解决方案

我码玄黄的博客

12-10

1312

移动端H5开发常遇问题：iOS滑动不流畅、页面缩放、软键盘归位、点击穿透、兼容性、性能优化、iOS长按选中、上下拉空白、日期转换NAN。提供相应CSS、JavaScript解决方案。

常见的移动端H5页面开发遇到的坑和解决办法

qq_35859392的博客

04-17

988

转过来，平时看看。虽然还有很多问题至今无解。比如：华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏。！！ 1、安卓浏览器看背景图片，有些设备会模糊。用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的9...

iOS系统和微信中不支持audio自动播放问题的解决方法

08-29

在本文中，我们将探讨如何解决这一问题，以便在iOS设备上的微信环境下实现H5页面的音频自动播放。首先，我们需要了解iOS系统对音频播放的策略。苹果设备为了节约电量和防止用户被打扰，要求音频播放必须由用户交互...

移动端h5常见问题

weixin_44708870的博客

03-29

1472

弹出数字键盘安卓跟IOS的表现形式应该不一样，大家可以自己试试。当运用了正则pattern后，就不用关注input的类型了

ios 上h5点击无效_IPhone中H5页面用on绑定click无效的解决方法

weixin_31512775的博客

12-23

1109

首先声明本人资质尚浅，本文只用于个人总结。如有错误，欢迎指正、共同提高。-----------------------------------------------------------------------------------首先问一句？为什么移动页面还在用click方法？假如必须用click，且遇到如标题所示bug,下文便是解决之道。当然，如果不用必须用click，则换成touch...

H5项目在ios 系统版本12.0中打不开的情况

insist_life的博客

11-24

1668

背景：最近做了一个H5项目，主要是vue3+vite等技术栈来写的；3、知道了可能是某些高阶语法在ios12中不兼容，那当时就想着把没有babel成功的语法手动降成es5的，但是全局检索发现这些语法都不是开发者中的代码，而是官方的写法，我担心我的水平不够，改了一处导致整个项目崩掉，索性就放弃了这个写法；2、在工具引入后，在测试环境中，我们发现控制台中没有报任何错误，然后就去看看network中的静态资源加载，发现有几个js、css文件资源没有加载，然后又在百度、优快云上转了半天，找到一篇博主写的文章。

iphone5下不能点击-H5开发点中击事件在iPhone6下能正常能触发，iPhone5 不能触发，不兼容解决

weixin_41652495的博客

01-19

982

因为手机端开发js不启用严格模式，变量未声明静默失败，5版本低不兼容解决：js文件头部声明："use strict"; 未声明的变量用let / var 声明

h5页面点击事件ios没反应 移动端兼容性问题

weixin_30653023的博客

08-17

1342

$(document).on("click",".动态添加的dom",function(){　　console.log("11") }) //在ios里这里动态添加的dom点击事件不会触发,解决办法：给触发点击事件动态添加的dom增加样式,cursor:pointer |||||| 或者增加一个touch事件 ios input button背景色不起作用的 input[typ...

iOS input 标签 focus 失效

DyuanH的博客

07-10

330

【代码】iOS input 标签 focus 失效。

button绑定onclick无效

qq_38427709的博客

06-11

2798

今天我遇见一个问题，在测试onclick和addEventListener(‘click’,fn)是否生效的时候，发现onclick的方法一直无法触发，我以为是不能同时生效 box.addEventListener( 'click', () => { console.log(1) }) <button type="submit" id="box" οnclick="click()">321312</button> function click() { console

vue移动端H5页面点击事件在部分安卓手机上失灵

牛马日常踩坑记录

10-25

2380

在一些场景下，为了提高用户体验，开发者会选择使用@touchend事件来代替@click事件，例如在移动端设备上进行滑动操作时，@touchend可以更好地处理滑动过程中的各种交互效果。之前开发了一个H5页面，模仿爱奇艺视频APP的我的频道，点击当前频道进行移除或者添加，开始使用的是@click事件，但是上线以后发现部分安卓手机比如荣耀系列的，点击屏幕上的按钮，事件触发不灵光，点好多次才触发一次。在移动端设备上，由于移动设备的屏幕尺寸较小，点击屏幕上的元素会更加精准，因此@click事件被广泛使用。

H5使用a标签时，在ios app中无法跳转

技术前端，忠于热爱 @回忆哆啦没有A梦

08-31

4297

在使用wangeditor富文本编辑器时，在 IOS 的app内，a标签点击跳转没有作用，无法跳转到所正确地址。安卓是可以正常跳转。原因竟然是a标签的target="_blank"

【H5】H5安卓、ios兼容性问题

小墨鱼的前端问题录

07-19

4191

触摸事件的响应顺序为 touchstart --> touchmove --> touchend --> click,也可以通过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题。input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal。CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。

h5 移动端click失效

最新发布

02-25

### H5 页面移动端 Click 点击事件失效解决方案对于H5页面在移动端遇到的Click点击事件失效问题，可以采取多种方法来解决这一难题。 #### 使用 FastClick 库减少延迟并提高响应速度 FastClick 是一种能够有效消除移动设备上点击事件300毫秒延迟的技术[^1]。通过引入此库，可显著改善用户体验，使应用程序反应更加灵敏。只需按照官方文档说明安装配置即可实现功能增强。 #### 替代方案——Tap 事件处理程序 Zepto框架提供了`tap`事件作为替代选项之一，专门用于克服标准click操作带来的延时现象。相较于传统的click方式而言，它能更好地适应触摸屏幕特性，提供即时反馈效果给用户交互过程带来流畅感。 #### 针对特定平台调整事件监听器设置由于iOS系统下部分浏览器版本存在限制条件，即仅允许button标签触发委托形式注册过的click回调函数执行环境之外的情况均会失败；因此建议针对此类情形作出相应修改措施： - 将目标选择器限定为<button>元素； - 或者采用直接绑定而非委派的方式定义行为逻辑[^2]。 ```javascript // 方法一：指定按钮元素进行事件代理 $(document).on("click", "button", function () { console.log('Button clicked'); }); // 方法二：直接为静态存在的DOM节点附加单击处理器 $(".staticElement").click(function(){ alert('This element was directly bound.'); }); ``` #### 利用 TouchEnd 代替传统 Click 实现相同目的考虑到不同操作系统间可能存在差异化的API支持状况以及性能表现上的优劣对比，有时选用更底层级的手势识别机制如TouchEnd或许不失为明智之举。这种方式不仅绕过了某些平台上特有的约束而且往往具备更好的效率优势[^3]。 ```javascript $("#targetElement").on("touchend", function(event){ event.preventDefault(); // 执行具体业务逻辑... }); ``` 以上几种策略可以根据实际应用场景灵活组合运用，从而确保跨平台的一致性和稳定性。