iOS，页面内button防止同时点击的解决方案

最新推荐文章于 2024-07-26 23:28:40 发布
最新推荐文章于 2024-07-26 23:28:40 发布
阅读量685 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： ios 安全 源代码 api UIButton
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/shisanshuno1/article/details/64918770
本文介绍了一种在页面中防止多个Button被同时点击的技术方案。通过设置Button的exclusiveTouch属性为YES，确保了用户在同一时间只能点击一个Button，从而避免了由此产生的并发点击问题。

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

有的伙伴遇到过一些需求，一个页面内有很多个button。按照一般逻辑来说点击button触发的方法都不尽相同。但是测试很蛋疼的俩手指头同时按两个button。这就出现了所谓的bug。怎么解决呢。

其实button有个属性是exclusiveTouch。这个属性可以理解为当点击这个button的时候无法点击其他的button。这样就解决了“bug”。

self.button.exclusiveTouch = YES;


shisanshuno1
关注
iOS小技能：设置视图圆角失效的解决方案
专注于计算机研发知识和资讯分享
05-14 1万+
前言 1、尝试设置_numberLab.clipsToBounds = YES; 2、尝试设置 [self.numberLab layoutIfNeeded]; 之后再执行cornerRadius - (void)layoutSubviews{ [super layoutSubviews]; [self.numberLab layoutIfNeeded]; ...
h5网页嵌套安卓苹果APP内 微信内打开H5等 遇到的各种适配问题与解决方案汇总 --持续更新
Beatingworldline的博客
08-06 1735
在站外拉起APP 可以用UniversalLinks。在站外拉起APP 可以用scheme协议。微信内可以借用友盟封装uslink实现。微信内可以借用应用宝实现。
iOS开发禁用多个按钮同时点击导致误触
spicyShrimp的博客
05-10 3452
在开发iOS项目的时候很多开发者都不会考虑这样的一个问题,包括我也不会——一个界面内有多个按钮或者touch时间同时进行会怎么样?单从字面上看可能不容易理解,举个比较容易理解的例子. 在某个应用的首页上,有两个按钮,我们单独的点击每一个按钮都会触发一次点击事件,这个本身没有任何毛病,类似于点击第一个按钮跳转到第一个子界面,点击第二个按钮跳转到第二个子界面.但是
iOS防止按钮重复点击扩展类
01-17
1.直接添加工程中即可使用. 2.在需要使用的地方 引入头文件即可. 3.在持续更新中,因为按钮重复点击可能会引起其他操作bug,如拍照按钮无法点击之类的问题, 目前只能发先一个解决一个.
ios 避免两个button同一时候被点击
weixin_30825581的博客
11-24 137
版权声明：本文为博主原创文章。未经博主同意不得转载。 https://blog.youkuaiyun.com/superchaoxian/article/details/24631293 这个能够通过[btnsetExclusiveTouch:YES]来避免，给每个bu...
【ios】禁止2个按钮同时响应点击
dhfo73267的博客
04-28 242
UIButton *btnNameGroup = [[UIButton alloc] init]; btnNameGroup.exclusiveTouch = YES; 虽然exclusiveTouch是UIView的属性，但是如果是UIImageView使用UITapGestureRecognizer的方式添加点击事件的情况下，这个字段是无效的 转载于:https://ww...
iOS中防止两个按钮同时点击的方法
Salvador
09-09 3931
在iOS开发中通常会遇到，两个靠的很近的按钮，一不小心两个按钮同时点击了。神奇的bug就产生了，如果两个按钮事件都是跳转页面的话，就会出现连跳两个页面的情况。如果两个按钮的响应都是进行一些逻辑运算的话，不知道又会有什么严重的bug会发生。 通常解决此问题的方法是：定义一个BaseViewController。设置一个方法setExclusiveTouchForButtons:(UIView *)m
iOS 防止按钮多次点击造成多次响应的方法
09-01
在iOS应用开发中，用户可能由于误操作或设备反应快，快速多次点击同一个按钮，这可能导致不必要的多次响应，如页面重复加载、多次网络请求等，不仅影响用户体验，也可能增加服务器负担。为解决这一问题，开发者通常...
【愚公系列】《AIGC辅助软件开发》013-AI辅助客户端编程：AI辅助 iOS 应用开发
热门推荐
时光隧道
07-26 6万+
随着人工智能技术的迅猛发展，AI 在软件开发领域的应用越来越广泛，尤其是客户端编程。本文将探讨 AI 如何辅助 iOS 应用开发，通过智能化的工具和技术，提高开发效率、优化代码质量，以及增强用户体验。在 iOS 开发过程中，面对复杂的编程任务和多变的需求，开发者常常需要花费大量时间进行调试和优化。而 AI 的引入，正好为这一挑战提供了有效的解决方案。通过利用 AI 的强大计算能力和学习能力，开发者能够更加高效地生成代码、检测错误，并获取技术建议。
button自适应高度和自动换行
07-14
2. CSS Grid：CSS Grid布局也提供了高度自适应的解决方案。通过`grid-template-columns: auto;`和`grid-auto-rows: min-content;`，可以创建一个网格，使得按钮的高度根据内容自动扩展。 3. JavaScript动态计算：...
详解iOS按钮暴力点击的便捷解决方案
01-04
iOS点击事件分类 1.程序中大量按钮没有做连续响应的校验，测试人员连续点击出现了很多不必要的问题，所以只能利用运行时特性，进行hook一下。runtime不能大量使用，但是偶尔使用也是很方便的哈哈。 2.设置单个按钮不需要hook 3.多次点击按钮，只执行最后一次点击事件，忽略前面的点击时间 //// UIButton+touch.h // LiqForDoctors #import#define defaultInterval .5 //默认时间间隔 @interface UIButton (touch) /**设置点击时间间隔*/ @property (nonatomic, as
iOS避免多个button同时被点击
克莱斯勒的博客
12-06 509
筛选的时候压力测试,综合/价格/距离筛选,防止两个button 同时被点击: 1.在AppDelegate中添加 [[UIButton appearance] setExclusiveTouch:YES]; 2.button.exclusiveTouch = YES;  
IOS 项目里面必要配置button 不能同时触发点击事件
zengxiansheng2的博客
08-23 508
我们在平常开发中都会遇到一个问题那么就是button的按钮的同事触发问题！那么我们现在就用一段代码来搞定它！//一般这个方法写在我们的父类继承类里面让所有子类都可以使用到该方法 - (void)viewDidDisappear:(BOOL )animated { [self setExclusiveTouchForButtons:self.view]; } #pragma mark 设置两
iOS禁止多点操作（按钮和Table项）
dianlangma0492的博客
07-30 156
（1）避免同时点击多个按钮； [myButtonsetExclusiveTouch:YES]; 设置确保当myButton点击时，其他按钮不响应； （2）避免同时点击UITableView中多个row -(NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(...
iOS中防止多个按钮同时点击出现的问题
BianHuanShiZhe的专栏
08-09 1159
-(void)setExcludiveTouchzforButtons:(UIView *)myview {     for (UIView *v in myview.subviews) {         if([v isKindOfClass:[UIButton class]]) {             [(UIButton *)v setExclusiveTouch:YE
iOS小技巧：禁止全屏点击事件
longhappyingly的专栏
11-28 3344
Q: 如何禁止全屏的点击事件 A: 使用 [[UIApplication sharedApplication] beginIgnoringInteractionEvents] XXXX 要禁止点击事件的代码块 [[UIApplication sharedApplication] endIgnoringInteractionEvents] 这段代码可以禁止整个屏幕的点击事件
iOS Button防误触崩溃
清秋锁梦的博客
12-05 778
-(void)viewDidAppear:(BOOL)animated{     [super viewDidAppear:animated];      [self setExclusiveTouchForButtons:self.view]; } -(void)setExclusiveTouchForButtons:(UIView *)myView {
iOS 按钮、Cell暴力点击触发多次响应的问题研究
LOLITA0164的博客
07-31 2万+
按钮的解决办法 cell的解决办法 相关阅读
如何在H5页面中实现点击按钮关闭软键盘？
最新发布
07-29
<think>我们已知在H5页面中，关闭软键盘的标准做法是让当前获得焦点的输入框（input/textarea）失去焦点（blur）。因此，点击按钮关闭软键盘的核心逻辑就是：找到当前获得焦点的输入元素，并调用其blur()方法。 但是，在实际操作中需要注意以下几点： 1. 可能存在多个输入框，我们需要确保让当前激活（active）的输入框失去焦点。 2. 在移动端浏览器中，直接调用blur()方法是安全且有效的。 因此，我们可以通过以下步骤实现： - 在按钮的点击事件中，获取当前处于激活状态的元素（document.activeElement）。 - 如果该元素是输入框（input）或文本域（textarea），则调用其blur()方法。 代码示例： ```javascript // 假设按钮的id为closeKeyboardBtn document.getElementById('closeKeyboardBtn').addEventListener('click', function() { // 获取当前激活的元素 const activeElement = document.activeElement; // 检查是否是输入框或文本域 if (activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA')) { activeElement.blur(); } }); ``` 注意：如果当前没有激活的输入框，那么点击按钮不会有任何效果（因为document.activeElement可能是body或按钮本身，我们不需要处理）。 另外，引用[2]中提到，在搜索框场景中，可以通过监听回车键（keyCode=13）来触发搜索并关闭软键盘，其中关闭软键盘的方法也是调用blur()。这同样验证了blur()方法的有效性。 针对引用[1]和引用[3]中提到的软键盘收起后页面布局问题（如页面空缺或留白），我们可以参考引用[3]中的方法，在软键盘收起后触发页面滚动调整。但请注意，这个问题与关闭软键盘的操作是独立的。如果你在关闭软键盘后遇到类似问题，可以结合引用[3]的方法进行修复。 例如，在Android微信浏览器中，可以在blur后调用： ```javascript setTimeout(() => { document.activeElement.scrollIntoViewIfNeeded(); }, 0); ``` 但注意，在调用blur()后，activeElement会变成body，所以上述方法可能不适用。引用[3]中提供的修复方法是在窗口resize事件中判断软键盘收起时执行调整。因此，如果你在关闭软键盘后遇到页面留白问题，可以尝试在按钮点击事件中同时触发页面调整（如滚动到顶部或特定位置）。 例如，针对iOS，可以在blur后滚动到页面顶部（引用[3]提供的方法）： ```javascript window.scrollTo({top: 0, left: 0, behavior: 'smooth'}); ``` 综合以上，一个更健壮的关闭软键盘并修复页面布局的按钮点击事件处理函数可能如下（同时处理了Android和iOS的留白问题）： ```javascript document.getElementById('closeKeyboardBtn').addEventListener('click', function() { const activeElement = document.activeElement; if (activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA')) { activeElement.blur(); } // 修复软键盘收起后页面留白问题 // 判断设备类型（简单通过userAgent，实际项目可能需要更精确的判断） const ua = navigator.userAgent; const isAndroid = /Android/i.test(ua); const isIOS = /iPhone|iPad|iPod/i.test(ua); // 对于Android，尝试将当前激活元素滚动到可视区域（但此时已经blur，所以可能无效，因此改为使用引用[3]中的方法，在resize事件中处理） // 这里我们直接调用修复方法（注意：引用[3]中的修复方法是在resize事件中调用的，但我们这里直接模拟） // 由于在blur后，我们无法确定页面是否出现留白，所以可以尝试使用setTimeout等待一下 setTimeout(() => { if (isAndroid) { // 引用[3]中的方法 document.activeElement.scrollIntoViewIfNeeded(); } else if (isIOS) { // 引用[3]中的iOS方法：滚动回顶部 window.scrollTo({top: 0, left: 0, behavior: 'smooth'}); } }, 100); }); ``` 但是请注意，上述修复留白的代码并不一定在所有情况下都有效，因为留白问题与具体浏览器和页面布局有关。建议根据实际测试情况调整。 另外，引用[4]提到，在iOS手机上，软键盘可能导致页面变形，他们通过判断事件目标是否为输入框来触发修复。但我们的场景是主动关闭软键盘，所以可以直接在关闭后执行修复。 总结：在H5页面中，通过点击按钮关闭软键盘的核心是调用当前输入框的blur()方法。如果遇到软键盘收起后页面布局问题，可结合设备类型采用不同的修复策略。 参考文献： [^1]: 微信浏览器H5页面软键盘关闭导致页面空缺的问题。 [^2]: H5 软键盘自动搜索功能。 [^3]: 解决 andoird 和 iphone 微信浏览器h5页面收起软键盘后页面留空白问题。 [^4]: html5页面 软键盘压扁,h5项目中关于ios手机软键盘导致页面变形的完美解决方案。</think>在H5页面中通过点击按钮关闭手机软键盘，核心方法是**让当前获得焦点的输入框失去焦点**。以下是具体实现方案： ### 方法一：直接调用输入框的 `blur()` 方法 ```javascript // 获取当前激活的输入框 const activeInput = document.activeElement; // 如果是输入框或文本域，则使其失焦 if (activeInput.tagName === 'INPUT' || activeInput.tagName === 'TEXTAREA') { activeInput.blur(); // 关键操作：关闭软键盘 } ``` **实现步骤**： 1. 在按钮点击事件中调用上述代码 2. `document.activeElement` 获取当前聚焦元素 3. 通过 `blur()` 强制失去焦点触发软键盘关闭 ### 方法二：完整实现示例 ```html <!-- HTML --> <input type="text" id="myInput" placeholder="点击输入"> <button onclick="closeKeyboard()">关闭键盘</button> <script> function closeKeyboard() { // 方案1：直接对当前焦点元素失焦 const activeEle = document.activeElement; if (['INPUT','TEXTAREA'].includes(activeEle.tagName)) { activeEle.blur(); return; } // 方案2：对特定输入框失焦（备用） document.getElementById('myInput').blur(); // iOS设备额外修复页面空白问题 if (/iPhone|iPad|iPod/.test(navigator.userAgent)) { setTimeout(() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }, 100); } } </script> ``` ### 关键注意事项 1. **兼容性问题**： - iOS设备软键盘关闭后可能造成页面留白，需额外滚动修复（参考引用[3]） ```javascript // iOS专用修复 setTimeout(() => window.scrollTo(0, 0), 100); ``` 2. **微信浏览器特殊处理**： - 微信内置浏览器可能存在页面不回弹问题（引用[1]） - 可添加全局resize监听器检测键盘状态： ```javascript let originalHeight = window.innerHeight; window.addEventListener('resize', () => { if (window.innerHeight >= originalHeight) { document.activeElement.blur(); } }); ``` 3. **搜索框特殊优化**： - 对于搜索框，建议使用 `type="search"` 属性（引用[2]） ```html <input type="search" @keyup.enter="search()"> ``` ```javascript function search() { document.activeElement.blur(); // 回车后关闭键盘 } ``` ### 设备兼容方案 | 设备类型 | 核心方法 | 额外修复 | |----------------|--------------------------|--------------------------| | 安卓设备 | `element.blur()` | 无需额外处理 | | iOS设备 | `element.blur()` | `window.scrollTo(0,0)` | | 微信浏览器 | `element.blur()` | 监听resize事件 | | 搜索框场景 | `type="search"` + 回车事件 | 移除X图标样式[^2] | > **提示**：实际测试中，90%的移动浏览器可通过`blur()`方法关闭键盘，iOS页面留白问题需额外滚动修复[^3][^4]。 --- ### 相关问题 1. **如何防止软键盘顶起页面导致布局错乱？** → 通过CSS viewport单位或JavaScript监听resize事件调整布局[^1][^4] 2. **iOS软键盘收起后页面底部留白如何修复？** → 使用`setTimeout(() => window.scrollTo(0,0), 100)`强制回滚[^3] 3. **如何实现搜索框的键盘"搜索"按钮功能？** → 设置`<input type="search">`并监听`keyup.enter`事件[^2] 4. **微信浏览器中软键盘关闭后页面不回弹怎么办？** → 监听resize事件，对比窗口高度变化手动触发布局重置[^1][^3]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值