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

最新推荐文章于 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 523
都给你扒清楚。
如何高效开展AI原生应用领域持续学习
最新发布
AI架构师小马
04-27 740
本文聚焦“AI原生应用开发者”的持续学习需求，覆盖从入门到进阶的全阶段学习场景。我们将回答：如何在知识爆炸中找到学习主线？如何避免“学完就忘”的无效努力？如何用实践加速知识转化？如何通过社区协作突破个人认知边界？本文将按照“认知升级→方法拆解→实战落地→生态共建”的逻辑展开：先理解AI原生应用的本质特征（为什么学），再拆解高效学习的四大核心模块（怎么学），通过具体案例演示学习路径设计（学什么），最后分享工具与资源（用什么学）。AI原生应用：以模型为核心、数据驱动自进化的新型软件持续学习三阶段。
VUE 切换页面后点击按钮没有反应
喜欢吃糖丶的博客
09-28 3452
昨天线上环境出现了一个页面问题，据当事人称，他当时在这个页面停留了很久，因为吃饭去了，然后回来发现此页面按钮点不了了，除了按钮点不了外没有其他问题，按钮就跟不存在一样页面因不好对外展示已换成其他页面。
开发移动端web页面click事件失效问题
weixin_30432579的博客
05-15 923
这两天在做一个WAP页面，在chrome上模拟移动端的时候，都好好的，然而放到手机上测试时， 发现有些点击事件直接无反应，但是有些有反应； 　　难道是由于我页面上有用到滚动插件，里面的touch事件的preventDefault导致click失效？ 于是，换成了touchSart事件试了下，效果比之前略好，但是，有重复点击事件，本小白排查了一会儿， 发现页面上明明在滚动区域有别的点击事件，...
vue移动端H5页面点击事件在部分安卓手机上失灵
牛马日常踩坑记录
10-25 2381
在一些场景下，为了提高用户体验，开发者会选择使用@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 488
切换tab导致页面样式获取不到
动态设置a链接,移动端safari点击跳转失效问题---kalrry
kalrry
02-19 2044
动态设置网页a链接safari点击失效问题---kalrry原因解决 原因 safari(一般是移动端)不能穿透div点击事件。a链接所在标签被其他div盖住了。 解决 给a标签所在父div添加样式 style=“position: relative ; z-index: 1” <div class="pic" style="position: relative ; z-index: 1"> ...
antd-mobile-v2图片选择器ImagePicker压缩图片处理方案
刻痕
02-10 1843
antd-mobile v2版本 在图片选择器后，没有压缩图片选项。自己写一下 官方文档：https://antd-mobile-v2.surge.sh/components/image-picker-cn/ canvas压缩图片常用的是：压缩图片宽高、透明度 这两个。如果要高级压缩，可查看: 我的另一个博客 直接看代码，这只是压缩案例。若项目需要前端上传腾讯云桶，可查看我的其他博客 import React, { useState } from 'react'; import { ImagePicker,
ElementUi进行tab页面跳转或切换并返回造成原页面滚动轴不能显示在历史位置
GaoYC123的博客
01-11 1448
问题描述：原页面进行连接跳转或tab业切换并返回时滚动轴位置跑到最上面scrollTop值变为0问题 解决思路：利用变量进行缓存跳转之前页面的scrollTop并在返回页面的时候进行重新赋值 基本代码： ...
关于antd-mobile的Tabs标签设置page或者initialPage后无法点击的问题
Wind_waving的博客
09-22 1164
转载自博客 估计这是Tabs组件的一个bug吧 做H5项目时，阿里的UI组件库比较多，一直用的很愉快，感谢阿里！ Ant Design Mobile组件库 不过，今天在使用tabs组件时，发现了一个bug，一个好的bug，总是让你欲仙欲死，特地记录下来让大家高兴一下。 如下图所示，目前有3个tab页。 项目首页地址为：http://xxx?wantTabNum=2，访问首页时，默认打开的是第一个tab，但是如果链接中wan
移动端html标签点击事件onclick失效问题解决
热门推荐
Ango的博客
02-14 1万+
今天测试突然提了这个bug，移动端onclick事件点击失效问题，网上找了好多方法，都是解决在js中绑定点击事件的问题 在js中绑定点击事件用click是兼容的 &lt;div id="test"&gt;click&lt;/div&gt;` &lt;script&gt; var fun = () =&gt; { console.log(Math.random()); } docu...
移动端点击事件全攻略，这里的坑你知多少？
weixin_34248849的博客
06-24 426
看标题的时候你可能会想，点击事件有什么好说的，还写一篇攻略？哈哈，如果你这么想，只能说明你too young to simple. 接触过移动端开发的同学可能都会面临点击事件的第一个问题：click事件的300ms延迟响应。不能立即响应给体验造成了很大的困扰，因此解决这个问题就成为了必然。 这个问题的解决方案就是：zepto.js的tap...
Javascript: 关于移动端与pc的点击事件的探讨
源辰_付鹏程
04-12 2411
问题1：移动端click事件会延迟响应 Solution: 移动端使用zeptojs中的tap事件来替换click 问题2： tap事件有点透的问题存在 点透：点击上一层按钮的事件，会触发下一层的点击事件或者链接 Solution: 因为tap事件的实现原理就是通过touch事件。因此，我们可以通过touch事件的结合来模拟点击事件。 Element.on('
移动端布局开发终极指南——轻松实现响应式设计
资源摘要信息:"移动端布局终极解决方案 --- 让移动端布局开发更加容易.zip" 在移动互联网迅速发展的当下，移动端布局开发已经成为前端开发中的核心技能之一。移动端布局不仅要保证在不同设备、不同屏幕尺寸上的兼容...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值