移动端网页开发踩坑记录——点击事件无效

最新推荐文章于 2024-09-18 23:36:48 发布
最新推荐文章于 2024-09-18 23:36:48 发布
阅读量783 收藏
点赞数 1
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_38385524/article/details/89463780
本文介绍了一种常见问题的解决方案，在使用Antd-Mobile开发时，底部TabBar可能占据整个页面，导致其上方的页面点击事件失效。通过调整TabBar的z-index属性为-1，可以有效避免这一问题，确保页面交互正常。

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

使用Antd-Mobile开发时，底部TabBar以上的整个页面点击事件均无效，右键检查元素发现原因为底部TabBar占据了整个页面，情况类似如图

解决方案：底部导航加个z-index：-1就可以了

CptSwift
关注
【工具篇】【Wizi.ai：前端开发的“外挂级“助手！从今天起，和无效加班、全网乱搜说再见】
商务合作|问题讨论|交流学习 请联系作者微信，加微信请务必注明来意，博客主页有联系方式
03-26 522
都给你扒清楚。
如何高效开展AI原生应用领域持续学习
最新发布
AI架构师小马
04-27 739
本文聚焦“AI原生应用开发者”的持续学习需求，覆盖从入门到进阶的全阶段学习场景。我们将回答：如何在知识爆炸中找到学习主线？如何避免“学完就忘”的无效努力？如何用实践加速知识转化？如何通过社区协作突破个人认知边界？本文将按照“认知升级→方法拆解→实战落地→生态共建”的逻辑展开：先理解AI原生应用的本质特征（为什么学），再拆解高效学习的四大核心模块（怎么学），通过具体案例演示学习路径设计（学什么），最后分享工具与资源（用什么学）。AI原生应用：以模型为核心、数据驱动自进化的新型软件持续学习三阶段。
VUE 切换页面后点击按钮没有反应
喜欢吃糖丶的博客
09-28 3451
昨天线上环境出现了一个页面问题，据当事人称，他当时在这个页面停留了很久，因为吃饭去了，然后回来发现此页面按钮点不了了，除了按钮点不了外没有其他问题，按钮就跟不存在一样页面因不好对外展示已换成其他页面。
开发移动端web页面click事件失效问题
weixin_30432579的博客
05-15 923
这两天在做一个WAP页面，在chrome上模拟移动端的时候，都好好的，然而放到手机上测试时， 发现有些点击事件直接无反应，但是有些有反应； 　　难道是由于我页面上有用到滚动插件，里面的touch事件的preventDefault导致click失效？ 于是，换成了touchSart事件试了下，效果比之前略好，但是，有重复点击事件，本小白排查了一会儿， 发现页面上明明在滚动区域有别的点击事件，...
vue移动端H5页面点击事件在部分安卓手机上失灵
牛马日常踩坑记录
10-25 2380
在一些场景下，为了提高用户体验，开发者会选择使用@touchend事件来代替@click事件，例如在移动端设备上进行滑动操作时，@touchend可以更好地处理滑动过程中的各种交互效果。之前开发了一个H5页面，模仿爱奇艺视频APP的我的频道，点击当前频道进行移除或者添加，开始使用的是@click事件，但是上线以后发现部分安卓手机比如荣耀系列的，点击屏幕上的按钮，事件触发不灵光，点好多次才触发一次。在移动端设备上，由于移动设备的屏幕尺寸较小，点击屏幕上的元素会更加精准，因此@click事件被广泛使用。
antd移动端onClick事件点击无效
weixin_30273763的博客
12-07 1753
　　最近空余时间比较多，自己想学习react跟移动端的东西，就选用了antd-mobile库，框架搭好开发过程中遇到个问题，里面绑定的点击事件无效,不仅是antd自带的按钮无效，原生button点击也没反应，网上找了一大堆没有好的解决方案。在调试过程中发现 原来是我在设置底部导航的时候，把内容部分遮挡了，所以肯定点击没反应，解决方案把底部导航加个z-index：-1就可以了。 　　总解：发...
点击事件，第一次无效，第二次才响应的问题
chuyouyinghe的专栏
05-30 200
今天碰到的问题，android的标题栏一个回退button，每次进入的时候第一次点击无效，一直到第二次点击时才响应，然后把代码copy到系统的回退按钮里面，结果每次都能响应，后面想了想，应该跟焦点有关系。版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：https://blog.youkuaiyun.com/hj563308597/article/details/50131131。
公有云开发流程、接口页面调试流程 踩坑记录
郊眠寺
09-09 589
的操作，同样未果。最后，怀疑可能是有些包没下载下来的问题，
Web移动端实现自适应缩放界面的方法汇总
X W F
07-28 957
方案一： 设置tranform/scale 首先设置内容固定宽度、自动高度（以下举例） width: 375px; height: auto; 通过获取窗口的宽度与固定宽度相除，获得缩放比例 const scaleValue=window.innerWidth / 375 在html层，添加一段script： <script dangerouslySetInnerHTML={{ __html: this.getScript() }}></script> 添加一段设置zoom
微信小程序开发中的消息订阅与模板消息发送
master_chenchen的博客
09-18 1061
提升消息送达率的小技巧还包括优化消息发送的时间，避开用户休息或工作繁忙的时段，选择一天中最适合发送消息的黄金时间。此外，适当的情感化表达能够让消息更加贴近人心，比如使用更加亲切的语言、加入温馨的问候语等，这些都是提高用户好感度的有效手段。模板消息的应用场景非常广泛，从电商领域的订单确认、物流更新，到教育行业的课程提醒、成绩通知，再到医疗健康领域的预约成功、报告推送等，几乎涵盖了生活的方方面面。你可以把这里当作自己的家，无论是工作之余的小憩，还是寻找灵感的驿站，我都希望你能在这里找到属于你的那份快乐和满足。
iview的tab组件切换隐藏元素无法获取高度问题
笋笋的博客
01-05 487
切换tab导致页面样式获取不到
ElementUi进行tab页面跳转或切换并返回造成原页面滚动轴不能显示在历史位置
GaoYC123的博客
01-11 1448
问题描述：原页面进行连接跳转或tab业切换并返回时滚动轴位置跑到最上面scrollTop值变为0问题 解决思路：利用变量进行缓存跳转之前页面的scrollTop并在返回页面的时候进行重新赋值 基本代码： ...
关于antd-mobile的Tabs标签设置page或者initialPage后无法点击的问题
Wind_waving的博客
09-22 1162
转载自博客 估计这是Tabs组件的一个bug吧 做H5项目时，阿里的UI组件库比较多，一直用的很愉快，感谢阿里！ Ant Design Mobile组件库 不过，今天在使用tabs组件时，发现了一个bug，一个好的bug，总是让你欲仙欲死，特地记录下来让大家高兴一下。 如下图所示，目前有3个tab页。 项目首页地址为：http://xxx?wantTabNum=2，访问首页时，默认打开的是第一个tab，但是如果链接中wan
【JS】动态添加的元素绑定点击事件在移动端不生效
SZnAl的博客
07-13 3713
蜂鸟视图 蜂鸟云 移动端点击事件无法触发
Vue移动端点击事件失效Bug解决
jk54546的博客
08-27 6102
问题复现： 为div添加click点击事件，但是点击无效。只有在点击图标处才可跳转。 <div class="tab_row" @click="toDetail(value)"> <i class="icon-addr"></i> <span>{{value.address}}</span> </div> 问题解决思路： 刚开始以为是图层遮挡，将文字区域遮挡导致点击无效，搜索后网上有的帖子说： 在遮挡层加： st
微信中on('click')事件失效的解决办法（微信兼容性）
热门推荐
奥巴牛的博客
07-24 1万+
在调试微信环境的网页时，有个代码是这样的（其中#select 非button、a标签元素） $(doucument).on('click','#select',function(){ //代码 }) 但是在安卓中却获取不到事件。 经过排查，判断是微信内置浏览器不支持，有以下几种方法： 1.改为$(‘#select’).click(function(){}) 有效 2.给​目标元素...
用touchStart事件代替click处理手机页面上的触摸事件
师远鹏
06-25 8676
在电脑页面上一切顺利，但是用手机打开页面后就是一直按钮没反应，后来才想到触摸事件， 代码如下： var touchStart = function () { alert("test"); }; $('#opensubmit1').bind('touchstart', touchStart); 将上面代码放到ready方法中即可 $(document).r
移动端布局开发终极指南——轻松实现响应式设计
资源摘要信息:"移动端布局终极解决方案 --- 让移动端布局开发更加容易.zip" 在移动互联网迅速发展的当下，移动端布局开发已经成为前端开发中的核心技能之一。移动端布局不仅要保证在不同设备、不同屏幕尺寸上的兼容...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值