首页 > 其他分享 >移动端点击穿透问题解决

移动端点击穿透问题解决

时间:2022-11-19 01:00:42浏览次数:69  
标签:tap 350ms 标签 mask 穿透 点击 touch 移动 click

js 解决方案

1、只用touch

把页面内所有click全部换成touch事件(touchstart、touchend、tap),需要特别注意a标签,a标签的href也是click,需要去掉换成js控制的跳转,或者直接改成span+tap控制跳转。如果要求不高,不在乎滑走或者滑进来触发事件的话,span+touchend就可以了。毕竟tap需要引入第三方库

不用a标签其实没什么,移动app开发不用考虑SEO,即便用了a标签,一般也会去掉所有默认样式,不如直接用span

2、只是用click

下下策,因为带来300ms延迟,页面内任何一个点击都将增加300ms延迟,想想都慢

不用touch就不会存在touch之后300ms触发click的问题,如果交互性要求不高可以这么做, 强烈不推荐 ,快一点总是好的

3、拿个东西来挡住

比较笨的方法,不推荐用

4、tap后延迟350ms再隐藏mask

改动最小,缺点是隐藏mask变慢了,350ms还是能感觉到慢的

只需要针对mask做处理就行,改动非常小,如果要求不高的话,用这个比较省力

css 解决方案

5、pointer-events

比较麻烦且有缺陷,不建议使用

mask隐藏后,给按钮下面元素添加上pointer-events:none;样式,让click穿过去,350ms后去掉这个样式,恢复响应

缺陷是mask消失后的的350ms内,用户可以看到按钮下面的元素点着没反应,如果用户手速很快的话一定会发现

在下面元素的事件处理器里做检测(配合全局flag)

 

转自:http://www.shouhuola.com/q-24073.html

标签:tap,350ms,标签,mask,穿透,点击,touch,移动,click
From: https://www.cnblogs.com/beileixinqing/p/16905332.html

相关文章

  • 缓存穿透、缓存击穿、缓存雪崩
    缓存穿透    缓存穿透的解释是,数据既不在缓存中也不存在于数据库中,造成每次查询都会对缓存和数据库进行查询。比如:有人恶意用不存在的id参数进行接口调用,每次调用......
  • leaflet 点击图标显示echarts图表弹框
    leaflet散点图片根据官方文档我们应该都可以加载出来,点击如果想弹出简单的文本内容,title属性加载一个自定义html就可以了,但有时项目需求需要配合别的图表组件使用,简单记录......
  • 【专项测试系列】-缓存击穿、穿透、雪崩专项测试
    作者:刘须华一、背景概述: R2M缓存的使用,极大的提升了应用程序的性能和效率,特别是数据查询方面。而缓存最常见的问题是缓存穿透、击穿和雪崩,在高并发下这三种情况都会有大量......
  • 移动端H5获取用户当前经纬度,地理位置信息
    移动端浏览器有自带的获取用户经纬度的方法,但是位置会有偏差。如果只是要个大概,就当我没说。这里我用的是腾讯的api,直接https引用。在页面上加上 <script charset="ut......
  • echarts tooltip 中添加点击事件(vue项目)
    最近碰见一个需求,就是Echarts地图提示框中有网址,点击网址的时候跳转到指定的网页,  这个需求挺有意思,刚开始写的时候感觉应该就是普通的逻辑,没啥特别注意的,后来在写......
  • 小程序textarea穿透问题
    问题:当有fixed元素时,无论设置多少z-index值,textarea组件都会穿透该fixed元素底部fixed浮动选择车牌组件,当车牌未点击确认,自动跳转到输入备注textareafocus解决方案:......
  • js 移动端禁止双指或双击放大
    代码://禁用双指放大document.documentElement.addEventListener('touchstart',function(event){if(event.touches.length>1){event.preventDefault()......
  • Redis缓存雪崩,击穿和穿透
    这三个问题的发生,会导致大量的请求直接积压到数据库,如果并发量很大,则可能会导致数据库宕机或故障。缓存雪崩 描述:大量的请求无法在redis缓存中进行处理而被发送到数据......
  • 【HMS Core】使用图形引擎服务点击一次会多次触发RenderView的方法addOnTouchEventLis
    ​问题描述使用图形引擎服务点击一次会多次触发RenderView的方法addOnTouchEventListener 解决方案addOnTouchEventListener会有MotionEvent.ACTION_DOWN、MotionEven......
  • frp内网穿透搭建
    1、准备条件一台具有公网IP的服务器,比如阿里云服务器2、frp下载下载地址:https://github.com/fatedier/frp/releases3、解压安装将服务端安装在服务器上,客户端安装在......