js点击事件在苹果ios端失效的解决方法

最新推荐文章于 2021-07-01 00:51:51 发布
原创 最新推荐文章于 2021-07-01 00:51:51 发布 · 3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js点击事件ios兼容

本文介绍了解决苹果浏览器中手指误点问题的方法，需要解除浏览器的默认功能或为点击事件绑定特定元素，通过CSS设置cursor属性来实现。

原因

苹果浏览器禁止了手指误点功能

解决

必须解除这一功能，或者给点击事件指引某个元素上绑定了事件。
例如：
div{
cursor: pointer;
}

uniapp - 解决 uni.chooseImage 在苹果 IOS 真机上点击没反应的问题，苹果手机点击 uni.chooseImage方法不生效，也不报任何错误（解决苹果ios系统点击无效问题）
🏆 前端领域优质创作者
07-27 1万+
uniapp小程序h5网页苹果ios系统点击uni.chooseImage不执行点击无效，uniapp使用uni.chooseImage方法点击没反应怎么办，uniappuni.chooseImage在ios苹果手机运行点击不触发，uniappuni.chooseImage苹果ios系统点击无效，uniapp项目ios端云打包之后uni.chooseImage不生效了，uniapp打包之后uni.chooseImage()无法打开相机，uniapp苹果手机无法打开相机和相册，uniapp网页h5微信支
精选资源
html2Canvas:解决html2Canvas在IOS13.4中失效问题
05-12
解决html2Canvas在ios13.4中失效问题 // 引入 import html2canvas from "../../lib/html2canvas"; // 使用, 全局window对象加入html2canvas，如果没有window就调用原来的，所以需要做判断 (window.html2canvas || ...
js点击事件在ios中失效的解决方案
deathstrider的博客
09-27 3606
ios中不允许将点击事件绑定在document或者body上，如果绑定上的话将会失效。解决方案： 例如： $(document).on(‘click’, ‘#content’, function ()}… //无效 第一种： 改为： 用#content外面的标签，但不要是 docuemnt或者body $(‘任意的#content的父元素’).on(‘click’, ‘#content’, fu...
转：js点击事件在ios中失效的3种解决方案
weixin_33943836的博客
10-23 369
ios中不允许将点击事件绑定在document或者body上，如果绑定上的话将会失效。解决方案： 例如： $(document).on('click', '#generate', function ()}... //无效 第一种： 改为： 用#generate外面的标签，但不要是 docuemnt或者body $('任意的#generate的父元素').on('click', '#gen...
关于js中绑定事件失效问题
a810373329的博客
05-02 9879
相信很多开始学习前端开发的朋友都发生过绑定事件失效的问题，那么究竟是什么原因使得事件失效呢？ 这里作者以jquery库编写作为例子。 第一种：直接失效。 <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type=
js点击事件在苹果端失效的问题
weixin_33826609的博客
07-28 463
在安卓机上，我们随意定义点击事件也能够在找到点击的元素，但是在苹果端上就是不行，怎么点击都没有效果。这是因为在苹果机上window禁止了手指误点功能，必须解除这一功能，或者给点击事件指引某个元素上绑定了事件。最好的解决方法如下： div{ cursor: pointer; } 转载于:https://www.cnblogs.com/jaume/p/7249870.htm...
ios对js的on绑定事件不生效
Cool的博客
03-04 1074
只要对对应的事件触发器加css:cursor:pointer
精选资源
基于IOS端微信分享失效的踩坑及解决方法
01-20
最近的一个公众号是基于vue的spa应用，在接入微信分享和微信语音的时候出现了：在Android上一切正常，但是在ios端调用wx.config的时候总是失败，去翻了官方文档也并没有找到解决方案，最后在测试中发现是因为初始化...
解决iOS下无法触发focus事件的问题
08-27
"解决iOS下无法触发focus事件的问题" 在移动端开发中， focus 事件是一个非常重要的事件，它可以帮助开发者更好地控制用户的输入行为。但是在iOS平台上，触发 focus 事件却是一个非常棘手的问题。本文将为大家分享...
精选资源
ios 不支持 iframe 的完美解决方法(兼容iOS&安卓)
01-20
在iOS和Android平台之间，网页开发常常面临一些兼容性问题，特别是在使用`...同时，对于其他可能出现的兼容性问题，比如iOS中的滚动条失效或页面宽度超出屏幕，也可以通过类似的设备检测和条件判断来定制解决方案。
苹果手机（ipone）点击元素，事件不执行
yq_dxp1218的博客
07-26 1425
最近发现苹果手机，给除了a链接之外的元素绑定事件不执行 最后才发现苹果手机对div之类的块元素不识别点击事件， 解决方案-1  给要点击元素增加 css样式 cursor:pointer 就可以了，例如以下 <style>       .commonbtn{cursor:pointer  }     /**/ </style>      解决办法 2 ：    ...
ios 绑定事件无效
热门推荐
纸上得来终觉浅
06-14 20万+
问题描述当使用委托给一个元素添加click事件时，如果事件是委托到 document 或 body 上，并且委托的元素是默认不可点击的（如 div, span 等），此时 click 事件会失效。测试代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="w
js点击事件在ios中失效的3种解决方案
ITzhongzi的博客
07-15 1万+
ios中不允许将点击事件绑定在document或者body上，如果绑定上的话将会失效。解决方案： 例如：  $(document).on('click', '#generate', function ()}... //无效 第一种： 改为： 用#generate外面的标签，但不要是 docuemnt或者body $('任意的#generate的父元素').on('click
jq苹果手机全屏下点击无效果_jQuery全屏滚动插件fullPage.js使用中遇到的问题(滑动轮播效果无效)...
weixin_36203080的博客
01-27 789
1.fullPage.js是什么?fullPage.js 是一个基于 jQuery ,用来制作全屏网站的插件。2.兼容性：- jquery兼容：兼容 jQuery 1.7+- 浏览器兼容： IE8+，Chrome，FireFox3.问题：根据使用文档，轻松实现了全屏，但是当在某一屏中，内部的子元素中需要实现滑动的轮播效果，一开始，我就直接在$(document).ready()里面写方法,但是网页...
微信小程序IOS设备不支持js写法总结
完备创新
07-01 834
问题1：微信小程序 new Date() 方法在iOS设备上无效 经验情况：个人在开发小程序发现，iOS测试版可以使用安卓也可以使用，唯一用在体验版和正版上就报错，最后发现是时间返回NAN。 解决方案： 将时间文本中的“-” 替换为 / let date = "2021-07-01 00:00" let now = new Date(date.replace(/-/g,'/')) 欢迎加我微信: wanbeishijie (优快云) 一起交流学习或者合作开发 ...
ios手机 按钮点击事件没反应（这个按钮是js生成的）
u012028371的博客
08-29 1万+
昨天碰到这种问题，在Android手机上点击事件是可以的，但是iOS手机没反应。用的是jQuery，我立即就想到是点击事件格式写的有问题，因为 我之前就碰到过类似的问题，比如，你用js 生成的一个按钮  按钮  （记住是 js 生成的，不是HTML写的），用 $('.btn').on("click",function(){}); 这样点击事件可能会不生效。需要这样写，$('XXX').on('cl
html在ios上不执行js,JS方法在IOS上不执行，在安卓上正常
weixin_42484477的博客
06-22 1005
getGameInfoApp:function(){getAppSignInfo()window.callbackFromApp = (methodName, result, extInfo) => {if (methodName == 'getAppSignInfo') {let data = JSON.parse(result)this.$http.jsonp(config.ajaxUr...
android webview下纯JS实现长按
dryZeng的专栏
03-04 4525
以前自己没事开发了一个android webapp，其中有长按LI列表弹出菜单，有童鞋问怎么实现的，特此分享一下。 其实也很简单，只要清楚五个方法就行：ontouchstart、ontouchmove、ontouchend、setTimeout、clearTimeout 1、首先在我们按下手指时触发：ontouchstart 2、当我们释放手指时触发：ontouchend 3、如果在按与放
使用Window.open()跳转页面在苹果系统ios下失效问题
最新发布
04-10
<think>好的，我需要帮助用户解决在iOS环境下window.open()方法失效的问题。根据用户提供的引用资料，我需要综合整理出解决方案。首先，用户提到直接使用window.open在iOS可能失效，尤其是在异步操作中。引用[1]指出使用window.location.href可以在iOS生效，但Android不行，反之亦然，所以可能需要区分环境。引用[2]提到了检测是否是APP环境，通过用户代理字符串来判断，这可能有助于条件处理。引用[3]提到在Vue中动态URL的问题，需要将window对象预先定义，比如用const thisWindow = window，然后调用thisWindow.open，这可能绕过某些框架的限制。引用[4]说明异步调用如setTimeout或接口请求后，window.open可能被拦截，建议直接同步调用或在用户交互事件中触发。 接下来，我需要将这些信息整合成一个清晰的解决方案步骤。首先，区分iOS环境，可能需要使用用户代理检测。然后，在iOS中使用window.location.href替代window.open，或者确保在同步的用户交互事件中调用window.open。另外，预先定义window对象可能解决框架中的问题。还需要处理异步的情况，比如在接口请求完成后，将跳转操作放在用户触发的函数中，比如点击按钮，或者在异步回调中直接使用window.location.href。同时，要注意在混合APP环境中可能需要特定的处理，比如检查用户代理字符串是否为apicloud等。 需要验证这些步骤是否覆盖了所有情况，比如同步和异步调用，不同环境下的处理，以及框架中的限制。可能还需要考虑其他因素，比如浏览器的弹出窗口拦截器，但根据引用资料，主要问题集中在iOS的异步调用和框架中的限制。因此，解决方案应包括环境检测、替换跳转方法、处理异步调用以及框架适配。最后，生成相关问题以帮助用户进一步理解问题。</think>### 解决方案：`window.open()`在iOS失效的常见原因及处理方法 #### 1. **同步触发与异步触发的差异** 在iOS中，`window.open()` **必须由用户直接触发的同步操作**（如点击事件）才能生效。若在异步操作（如`setTimeout`、接口请求回调）中调用，会被浏览器拦截[^4]。 **修复方法**： - 若需异步跳转，将跳转动作绑定到用户二次交互（如弹窗确认按钮）： ```javascript setTimeout(() => { const confirmJump = confirm("跳转到新页面？"); if (confirmJump) { window.open("https://www.baidu.com"); // 用户点击确认后同步触发 } }, 1000); ``` - 或直接使用`window.location.href`强制跳转（但会替换当前页面）： ```javascript fetch(url).then(() => { window.location.href = "https://www.baidu.com"; // 适用于无需保留原页面的场景 }); ``` #### 2. **框架环境下的作用域问题** 在Vue/React等框架中，若动态调用`window.open`（如`@click="window.open(url)"`），可能因作用域限制导致方法未正确绑定[^3]。 **修复方法**： 在脚本中预定义`window`对象： ```javascript // Vue3示例 <script setup> const thisWindow = window; // 定义局部变量 const alipayUrl = "https://example.com"; </script> <template> <button @click="thisWindow.open(alipayUrl)">跳转</button> </template> ``` #### 3. **区分设备环境适配跳转方式** iOS与Android对跳转方法的支持存在差异，可通过**用户代理检测**针对性处理[^1][^2]： ```javascript // 检测是否为iOS设备 const isIOS = /iphone|ipad|ipod/i.test(navigator.userAgent.toLowerCase()); // 统一跳转函数 function safeOpen(url) { if (isIOS) { window.location.href = url; // iOS优先使用location.href } else { window.open(url); // Android正常使用open } } ``` #### 4. **混合APP环境特殊处理** 若页面嵌入在APP的WebView中（如使用APICloud、Uni-App等框架），需确认客户端是否允许`window.open`，部分情况下需调用原生桥接方法[^2]： ```javascript // 判断是否在混合APP环境 const isHybridApp = /apicloud|uphybrid/i.test(navigator.userAgent); function hybridOpen(url) { if (isHybridApp) { // 调用客户端原生跳转接口，例如： uplus.navigateTo(url); // 具体方法名需与客户端协商 } else { safeOpen(url); // 普通浏览器环境使用前述方法 } } ``` ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值