当前位置: 首页 > news >正文

【JavaScript】点击穿透

点击穿透是指在某些场景下,⽤户在快速点击⻚⾯元素时,由于某些原因(例如⽹络延迟),
在前⼀个元素上的点击事件还没有完成时,下⼀个元素的点击事件就已经触发了,导致⽤户感
觉到⻚⾯点击⽆效或者出现异常。

解决点击穿透的⽅法有以下⼏种:

  1. 使⽤ debounce 或 throttle 函数。 这两种函数可以控制函数的执⾏频率,减少短时间内函
    数的执⾏次数,从⽽减少点击穿透的可能性。
  2. 使⽤ CSS pointer-events 属性。将当前元素的 pointer-events 属性设为 none,可以禁⽤
    当前元素的⿏标事件,从⽽避免在事件处理函数执⾏过程中发⽣点击穿透。
  3. 使⽤ touch 事件代替 click 事件。 在移动设备上,click 事件有300ms的延迟,可能会导致
    点击穿透。使⽤ touchstart、touchend 等 touch 事件可以避免这个问题。
  4. 在 click 事件中使⽤ preventDefault 函数。在 click 事件的处理函数中调⽤ preventDefault
    函数,可以阻⽌默认的事件⾏为,从⽽避免点击穿透。但是这种⽅法有可能会影响到⼀些
    ⽤户习惯,因此需要慎⽤。
http://www.lryc.cn/news/405786.html

相关文章:

  • [Linux]Mysql之主从同步
  • DAY21-二叉树
  • java面试-场景题
  • 【TORCH】matplotlib绘制一条横线的两种方法
  • 深入浅出mediasoup—WebRtcTransport
  • 如何让局域网中的其他电脑访问VMWare虚拟机上的Windows虚拟系统
  • 旧电脑回收前怎么清除数据
  • python——TinyDB
  • 【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第三十八章 驱动模块编译进内核
  • Mailspring搭建安装教程:打造个性邮件体验
  • 【分布式锁】Redission实现分布式锁
  • UE4/5 对话系统
  • Golang | Leetcode Golang题解之第275题H指数II
  • Python—面向过程编程,详细讲解(类和实例,初始化函数,类中封装数据与操作)
  • Linux云计算 |【第一阶段】SERVICES-DAY2
  • el-upload照片墙自定义上传多张图片(手动一次性上传多张图片)包含图片回显,删除
  • 三星Unpacked发布会即将举行:有新款折叠屏手机,还有智能戒指
  • 【Python】Matplotlib简要教程
  • 数驭未来,景联文科技构建高质大模型数据库
  • 视频汇聚平台EasyCVR启动出现报错“cannot open shared object file”的原因排查与解决
  • VMware 安装完,设备管理器中没有虚拟网卡(vmnet0、wmnet1、vmnet8) / 虚拟网络编辑器中没有桥接模式
  • 构建高效Node.js中间层:探索请求合并转发的艺术
  • 中断和EXIT原理介绍
  • vcpkg或者命令行需要设置代理时如何设置
  • tensorflow安装及数据操作----学习笔记(一)
  • 顺序表和单链表的经典算法题
  • python基础知识点(蓝桥杯python科目个人复习计划71)
  • 【大数据专题】Flink题库
  • Python鲁汶意外莱顿复杂图拓扑分解算法
  • 【C++】类和对象之继承