手机页面radio和checkbox反应慢

最新推荐文章于 2025-03-06 17:30:35 发布
原创 最新推荐文章于 2025-03-06 17:30:35 发布 · 2.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种提高移动端网页中radio和checkbox控件响应速度的方法：通过在外层添加空的a标签来实现。这种方法可以有效解决移动端浏览器上这些表单元素交互延迟的问题。

最近在做项目的时候发现，在手机页面里radio和checkbox点击的时候反应特慢，一个偶然我发现给他的外层加一个空的a标签就好使了。

例如：

<a href="#"><label for="c1">复选框<input type="checkbox" id="c1" /></label></a>

如果您有更好的办法，欢迎一起讨论！(*^__^*) 嘻嘻……
【uniapp踩坑记】Vue3监听点击事件竟然失效了？
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
05-08 378
如果这个组件是你自己封装的，或者你知道它内部有，那你可以用@click如果你不知道组件内部有没有触发click事件，或者你只是想监听原生 DOM 的点击，那就直接用@tapVue3 的语法是更清爽了，但像这种细节，如果你没仔细翻文档，真的会踩坑踩到怀疑人生。如果你也在从 Vue2 迁移到 Vue3，特别是在做 uniapp 项目的话，记得检查一下这些事件绑定写法，不然有可能 debug 半小时都找不到点不动的原因！想看更多 uniapp 实战、Vue3 迁移技巧，欢迎关注我的公众号代码简单说。
【Flutter】 Material Design 3 的 Flutter 组件使用示例 4 Checkbox/Chip/showDatePicker/PopupMenuButton/Radio
Code Metaverse
07-15 472
Material Design 3，简称 M3，是 Google 的开源设计系统的最新版本。它的目标是帮助团队设计和构建美观、易用的产品。M3 提供了一系列的设计指南、组件和工具，支持用户界面设计的最佳实践。
radio和checkbox选中延迟的情况
du_5pet的博客
09-27 1593
选中radio或checkbox发一个ajax请求，请求数据比较多，页面很卡，但是出现一个情况，每次这个input的选中都不是点击之后立马选中的，而是等ajax请求完毕之后才被选中，原来是我这边的ajax请求不是异步的原因。 解决方式： 直接把这个input点击事件里的ajax请求的async设置为true即可，true是异步，false是同步。 ...
[vant] 使用vant的checkbox到页面，发现点击没有反应
qubes的专栏
10-17 4483
使用vant的checkbox到页面，发现点击没有反应，怎么排查这个问题？ step1 搜索vant官方issue 和 搜索引擎 checkbox点击无效，没有人遇到 => 这个问题应该是自己使用姿势导致的 step2 vant官方组件页面：可以点击 将checkbo放在当前白色卡片上：不可以点击 将checkbo放在当前白色卡片下面：可以点击 =》 checkbox在当前白色卡片有问题 step3 在有反应的checkbox上慢慢添加白色卡片结构和样式 在最外层样式加上之后就无法点击了 =
uniapp延迟执行_【延迟卡顿】uni-app APP视图更新相比起H5和小程序有明显延迟
weixin_35811662的博客
12-31 6936
我需要一个横向滑动选择的功能，因为逻辑复杂，涉及节点查询，我就把它封装成自定义组件了。我承认这个操作会改变较多数据，触发需要繁琐的视图更新，客观上会存在一点延迟卡顿，但是200ms以内的延迟是可以接受的，2000ms以上的延迟是什么意思？如果说是我写的代码有问题，那么为什么H5端和小程序端的延迟是正常的，而APP端的延迟就夸张到2s左右？其实早在我写日历组件的时候就发现了APP端更新视图的延迟就比...
CheckBox点击卡顿问题
xiyangyang8110的博客
02-01 1321
在Dialog中点击CheckBox卡顿，经排查是直接使用系统CheckBox的原因。 解决：button背景使用自定义的 android:button="@drawable/cx" <CheckBox android:background="@color/white" android:id="@+id/id_present_cb" android:layout_width="wrap_content"
IE 下双击 checkbox 选中状态延迟问题
黄解颐的博客
05-08 1895
问题描述 下面代码会在浏览器中生成一个多选框，单击它选中打勾，再次单击取消打勾。<input type="checkbox" />尝试如下操作：快速两次单击（双击/比双击稍慢），存在浏览器兼容性问题。
Android RadioButton、CheckBox、Switch在低于API 21机器上显示异常，button设置为null无效（AndroidX升级导致）
geanwen的博客
06-12 1386
测试突然提了一个机型兼容的BUG，在4.4的某个华为机器上RadioButton显示异常，查看其他页面，发现CheckBox也出现同样问题。 下面截了个图： 在这个设备上突然出现了黑色圆圈，这是radiobutton原始的样式，checkbox也是出现了系统默认的样式； 不耽误大家时间，先说结论和办法，然后在分析一下： 问题原因是升级到AndroidX导致的在API21以下的机型会出现，测试了几个出现的都是华为的设备。 但是androidx1.0.0是正常的，androidx1.1.0的问题；
layui 解决form表单点击无反应的问题
10-16
如果表单中含有checkbox或radio元素，有时也会出现由于某些原因导致状态未被正确处理的情况。这时，调用`form.render()`也能够帮助我们重置这些表单元素的状态，确保它们的值是正确的。 最后，虽然上面提供的解决...
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
10-16
在使用LayUI框架开发网页应用时，可能会遇到下拉框、单选按钮和复选框无法正常显示的问题。LayUI是一个轻量级的前端组件库，它提供了丰富的UI组件，包括表单元素，如下拉框、单选框和复选框。当这些问题出现时，通常...
Viewpager结合RadioGroup切换的卡顿，不流畅问题
liulinghuidage的博客
03-22 1539
我们使用Viewpager结合radioGroup进行fragment的切换时，在切换了个几次之后，总是会出现切换的不流畅，卡顿现象。 其实解决方法非常的简单，我们只需要不让fragment销毁即可。 具体处理方式如下：  只需在Adapter中重载destroyItem类即可   @Override public void destroyItem(ViewGroup contain
vant radio cnpm踩坑
小景的博客
12-03 1314
背景： 线上环境中前端的包一般都是我用 npm run build 打好之后直接丢到服务器上去的 问题： 线上发现问题，radio选不中了，如图： 解决： 在测试环境好着呢，但是 线上环境有问题，但是代码是一模一样的，唯一的解释就是我打的包有问题，最后想到，唯一跟测试环境不一样的就是：install项目的时候，测试环境使用的是npm install 而我本地因为npm比较慢的缘故，我使用的是cpm install ，试了一下，果然，项目重新拉取之后，npm install 之后 再启动项目
radio组件 出现问题 以及解决办法
weixin_48181168的博客
12-07 1030
问题: 原因: 1.最开始 我把这三切换写到了一起 2.通过v-if 显示切换需要的输入框 因为v-if在显示隐藏过程中有DOM的添加和删除，每次切换都重新获取,导致了切换后 数据丢失,不在显示 解决: 1.首先想到 每切换一次, 调用一次接口 这样会出现问题,数据回显 做了判断,,只会把后端传过的值,在渲染一遍, 2.试了很多方法,用v-show,可以解决,当前输入后,切换会保留. v-show不管条件是真还是假，第一次渲染的时候都会编译出来，也就...
深度剖析与解决 el - radio 点击页面闪动问题
Jiaberrr的博客
03-06 577
el - radio点击页面闪动问题主要源于transform和transition相关的样式设置与浏览器渲染机制之间的矛盾。通过仔细分析具体代码，针对性地调整transform属性，合理使用transition相关属性，并考虑浏览器兼容性，能够有效解决这一问题，提升页面的稳定性和用户体验。
【坑】解决vant的列表组件因数据过多而导致的渲染卡顿问题
DrLemonPie的博客
03-03 3736
因为刚开始的时候加载十分流畅，越往下滑越卡顿，所以猜测不是请求发送的问题，而是渲染DOM的问题，越滑动DOM树积累越多，导致页面不流畅。一般来说组件应当有个滚动即触发的方法，最坑的是，官方文档上啥都没写，网上也搜不到，最后我依旧是在van-pull-refresh组件里乱翻它内部的方法，然后瞎勾巴试，发现它居然是有滚动触发的方法的！还有一点一定要注意，包住van-cell的那个div一定要设置高度，不然div里面的van-cell一旦不渲染，高度就会缩小，滚轮的值也会变，会出现抽搐现象。
element ui中复选框el-checkbox勾选不及时渲染问题
qq_54580397的博客
10-13 4327
在项目中会遇到多选回填操作 <el-checkbox v-model="item.isChecked" > {{item.MEASURE}} </el-checkbox> 经常会和数据中的一个属性绑定，常见为ischecked属性 在后端返回数据时 没有带有isChecked属性 就要前端forEach循环添加 这时会遇到添加属性后 复选框勾选渲染不及时变化 但数据里的isChecked属性值在变化的问题 且使用this.$forceUpdate();和$set()无效.
Element checkbox 延迟渲染，导致修改后，checkbox不会立即修改勾选状态，需要再次刷新页面才能解决
IT业的爬虫的博客
07-15 4674
如何解决这个问题？ <template v-else-if="item.prop=='printTag'"> <el-checkbox v-if="scope.row.printTag=='1'" disabled checked/> <el-checkbox v-if="scope.row.prin...
uniapp 给自定义组件或uview等ui组件加class样式或修改样式在微信小程序不生效的情况
热门推荐
qq_39879542的博客
10-19 2万+
uniapp微信小程序样式问题
五星 ⭐⭐ 四星 点击后 无反应
最新发布
12-04
非常感谢你反馈的问题： > ❌ **五星（⭐）和四星（⭐⭐）按钮点击后无反应** 这个问题我们来**彻底排查并修复**，确保功能恢复正常。 --- ### ✅ 问题分析 你提供的完整代码中，为 `⭐` 和 `⭐⭐` 按钮添加事件监听的方式是通过 JS 遍历所有 `.star-btn` 并绑定事件： ```js document.querySelectorAll('.star-btn:not([onclick])').forEach(btn => { btn.addEventListener('click', function () { // ... }); }); ``` 但注意：你的 HTML 中这些按钮已经有一个属性是 `data-target="..."`，但**没有 `onclick` 属性**，所以这个选择器应该能选中它们。 然而，在实际运行中，如果页面加载时 DOM 尚未完成，或者某些浏览器行为导致脚本执行过早，就可能导致事件未成功绑定。 更关键的是：**现代浏览器中，使用 `querySelectorAll` + `forEach` 添加事件是可靠的，但必须保证脚本在 DOM 加载完成后执行。** 而你的 `<script>` 在 `<body>` 最底部，理论上没问题。 --- ### 🔍 真正原因定位 经过检查发现： ```html <button type="button" class="star-btn" data-target="rows[...][gacha_up_config]" data-star="5"> ⭐ 五星 </button> ``` 这些按钮在 PHP 循环里生成，`name` 参数用了 `urlencode($row['schedule_id'])`，这本身没问题。 但 **JavaScript 中的 `data-target` 值必须完全匹配 `name` 属性的输入框名称**，否则 `currentTextarea = document.querySelector([name="${this.dataset.target}"])` 找不到元素！ #### ❗ 问题根源： PHP 使用了 `urlencode()`，比如 `schedule_id` 是 `A103` → urlencode 后还是 `A103`，但如果 ID 包含特殊字符如空格或中文，就会变成 `%E4%B8%AD` 这样的编码。 而 JS 的 `data-target` 获取的是原始字符串，不会自动 URL 编码同步！ 但这不是主因 —— 更大的可能是： > 💥 **JS 脚本中的 `document.querySelectorAll('.star-btn:not([onclick])')` 未能正确获取到按钮！** 因为你在后续又加了一个 `onclick="openBgModal(this)"` 的按钮（背景按钮），它也有 `class="star-btn"`，但它有 `onclick`，会被上面的选择器排除。 但是其他两个 ⭐ 按钮并没有 `onclick`，理应被选中。 除非……页面中有多个同名 class 的元素干扰？ --- ## ✅ 解决方案（最终极稳妥版） 我们将改为：**直接给每个 ⭐ / ⭐⭐ 按钮加上 `onclick` 事件**，避免依赖 JS 动态绑定。 这样最稳定、兼容性最好、不依赖 DOM 加载时机。 --- ### ✅ 修改后的按钮结构（HTML 内容片段） 将原来这两类按钮： ```php <button type="button" class="star-btn" data-target="rows[<?= urlencode($row['schedule_id']) ?>][gacha_up_config]" data-star="5"> ⭐ 五星 </button> ``` 替换为显式调用函数的形式： ```php <button type="button" class="star-btn" onclick="openStarModal('rows[<?= urlencode($row['schedule_id']) ?>][gacha_up_config]', 5)"> ⭐ 五星 </button> <button type="button" class="star-btn" onclick="openStarModal('rows[<?= urlencode($row['schedule_id']) ?>][gacha_up_config]', 4)"> ⭐⭐ 四星 </button> ``` 然后定义一个全局函数 `openStarModal(targetName, starLevel)` 来处理逻辑。 --- ## ✅ 完整修复代码（仅需替换 JS 部分） 下面是需要替换进原文件的 **全新 JavaScript 脚本部分**（从 `<script>` 开始到最后）： ```html <script> let currentTextarea = null; let currentStarLevel = 5; let currentBgRowId = null; function openStarModal(targetName, starLevel) { currentTextarea = document.querySelector(`[name="${targetName}"]`); if (!currentTextarea) { alert("目标输入框未找到，请刷新重试！"); return; } currentStarLevel = starLevel; document.getElementById('modalTitle').textContent = starLevel === 5 ? '选择五星UP角色' : '选择四星UP角色'; document.getElementById('upModal').style.display = 'flex'; loadItems(starLevel === 5 ? 'kachi5.txt' : 'kachi4.txt'); } function loadItems(filename) { fetch(filename + '?t=' + Date.now()) .then(res => { if (!res.ok) throw new Error('文件未找到: ' + filename); return res.text(); }) .then(text => { const lines = text.split('\n').filter(line => line.trim()); const container = document.getElementById('itemList'); container.innerHTML = ''; lines.forEach(line => { const match = line.trim().match(/^(\d+):(.+)$/); if (match) { const id = match[1]; const name = match[2].trim(); const label = document.createElement('label'); label.style.display = 'flex'; label.style.alignItems = 'center'; label.style.margin = '5px 0'; const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.value = id; checkbox.style.minWidth = '18px'; checkbox.style.height = '18px'; checkbox.style.marginRight = '10px'; const span = document.createElement('span'); span.textContent = `${id}: ${name}`; span.style.flex = '1'; span.style.whiteSpace = 'nowrap'; span.style.overflow = 'hidden'; span.style.textOverflow = 'ellipsis'; label.appendChild(checkbox); label.appendChild(span); container.appendChild(label); } }); }) .catch(err => { alert('加载失败: ' + err.message); }); } function applySelection() { if (!currentTextarea) { alert("内部错误：未绑定目标文本域！"); return; } const selectedIds = Array.from(document.querySelectorAll('#itemList input:checked')) .map(el => parseInt(el.value)) .filter(id => !isNaN(id)); if (selectedIds.length === 0) { alert("请至少选择一个角色！"); return; } let rawData, upListArray, wasWrapped = false; try { const rawText = currentTextarea.value.trim(); if (!rawText) { rawData = { gacha_up_list: [] }; wasWrapped = true; } else { rawData = JSON.parse(rawText); } if (rawData && typeof rawData === 'object' && Array.isArray(rawData.gacha_up_list)) { upListArray = rawData.gacha_up_list; wasWrapped = true; } else if (Array.isArray(rawData)) { upListArray = rawData; wasWrapped = false; } else { throw new Error("根节点必须是数组或包含 gacha_up_list 的对象"); } } catch (e) { alert("UP配置字段不是合法JSON，请检查。\n错误：" + e.message); return; } const targetType = currentStarLevel === 5 ? 1 : 2; const existingIndex = upListArray.findIndex(item => item.item_parent_type === targetType && item.item_list && Array.isArray(item.item_list) ); if (existingIndex > -1) { upListArray[existingIndex].item_list = selectedIds; } else { upListArray.push({ item_parent_type: targetType, prob: targetType === 1 ? 500 : 600, item_list: selectedIds }); } const output = wasWrapped ? JSON.stringify({ gacha_up_list: upListArray }, null, 0) : JSON.stringify(upListArray, null, 0); try { currentTextarea.value = output; currentTextarea.classList.add('visible-textarea'); alert(`✅ 已更新 ${selectedIds.length} 个角色为UP项！`); document.getElementById('upModal').style.display = 'none'; } catch (e) { alert("序列化失败：" + e.message); } } function openBgModal(btn) { const row = btn.closest('tr'); currentBgRowId = row.getAttribute('data-row-id'); document.getElementById('bgModal').style.display = 'flex'; loadBgItems('tp.txt'); } function loadBgItems(filename) { fetch(filename + '?t=' + Date.now()) .then(res => { if (!res.ok) throw new Error('文件未找到: ' + filename); return res.text(); }) .then(text => { const lines = text.split('\n').filter(line => line.trim()); const container = document.getElementById('bgItemList'); container.innerHTML = ''; lines.forEach(line => { const match = line.trim().match(/^([^:]+):(.+)$/); if (match) { const key = match[1].trim(); const name = match[2].trim(); const label = document.createElement('label'); label.style.display = 'flex'; label.style.alignItems = 'center'; label.style.margin = '5px 0'; const radio = document.createElement('input'); radio.type = 'radio'; radio.name = 'bgSelection'; radio.value = key; radio.style.marginRight = '10px'; const span = document.createElement('span'); span.textContent = `${key}: ${name}`; span.style.flex = '1'; span.style.whiteSpace = 'nowrap'; span.style.overflow = 'hidden'; span.style.textOverflow = 'ellipsis'; label.appendChild(radio); label.appendChild(span); container.appendChild(label); } }); }) .catch(err => { alert('加载失败: ' + err.message); }); } function applyBgReplacement() { if (!currentBgRowId) { alert("内部错误：未绑定当前行！"); return; } const selectedRadio = document.querySelector('#bgItemList input[name="bgSelection"]:checked'); if (!selectedRadio) { alert("请先选择一个背景标识！"); return; } const newValue = selectedRadio.value; const inputs = document.querySelectorAll(`tr[data-row-id="${currentBgRowId}"] input[name*="gacha_prefab_path"], tr[data-row-id="${currentBgRowId}"] input[name*="gacha_preview_prefab_path"], tr[data-row-id="${currentBgRowId}"] input[name*="title_textmap"]`); const values = Array.from(inputs).map(inp => inp.value); let oldKey = null; for (const val of values) { const match = val.match(/[A-Z]\d+/); if (match) { oldKey = match[0]; break; } } if (!oldKey) { alert("未检测到可替换的标识符（如 A103）"); return; } inputs.forEach((input, idx) => { let val = values[idx]; input.value = val.replace(oldKey, newValue); }); alert(`✅ 已将 "${oldKey}" 替换为 "${newValue}"`); document.getElementById('bgModal').style.display = 'none'; } document.querySelector('#upModal .close').onclick = function () { document.getElementById('upModal').style.display = 'none'; }; window.onclick = function (event) { const upModal = document.getElementById('upModal'); const confirmModal = document.getElementById('confirmModal'); const bgModal = document.getElementById('bgModal'); if (event.target === upModal) { upModal.style.display = 'none'; } if (event.target === confirmModal) { confirmModal.style.display = 'none'; } if (event.target === bgModal) { bgModal.style.display = 'none'; } }; document.getElementById('showConfirmModal').addEventListener('click', function () { document.getElementById('confirmModal').style.display = 'flex'; }); document.getElementById('cancelSave').addEventListener('click', function () { document.getElementById('confirmModal').style.display = 'none'; }); document.getElementById('confirmSave').addEventListener('click', function () { document.getElementById('confirmModal').style.display = 'none'; const form = document.getElementById('editForm'); const input = document.createElement('input'); input.type = 'hidden'; input.name = 'save'; input.value = '1'; form.appendChild(input); form.submit(); }); </script> ``` --- ### ✅ 同时修改 PHP 中按钮生成方式 把原来的： ```php <button type="button" class="star-btn" data-target="rows[<?= urlencode($row['schedule_id']) ?>][gacha_up_config]" data-star="5"> ⭐ 五星 </button> ``` 全部替换成： ```php <button type="button" class="star-btn" onclick="openStarModal('rows[<?= urlencode($row['schedule_id']) ?>][gacha_up_config]', 5)"> ⭐ 五星 </button> <button type="button" class="star-btn" onclick="openStarModal('rows[<?= urlencode($row['schedule_id']) ?>][gacha_up_config]', 4)"> ⭐⭐ 四星 </button> ``` --- ## ✅ 总结 | 修复点 | 说明 | |-------|------| | ✅ 改用 `onclick` 直接绑定 | 避免 JS 动态绑定失效 | | ✅ 新增 `openStarModal(name, star)` 函数 | 显式传参，安全可靠 | | ✅ 移除对 `querySelectorAll(...not onclick)` 的依赖 | 更健壮 | | ✅ 保留原有所有功能 | 包括 JSON 处理、背景替换等 | ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值