angular aggrid 触摸双击

  项目中,正常主列表行双击是有触发事件的,然而在 ipad 上的浏览器,双击事件不会被触发

  查了下相关信息,首先 aggrid 貌似是不支持 touch 相关的 api,而且 angular 底层的 dblclick 监听也触发不了

  所以思考了一下,模拟监听双击

  @HostListener 有一个监听 touch 的方法: touchstart

  首先测试了一下该方法,ipad 上是能实现触发的,并且点触几次就触发几次:

@HostListener('touchstart', ['$event'])
_touchstart() {
  console.log('touch start');
}

  双击间隔很短,那么就记录下单次点触的时间戳,第二次点触到来时,时间是否在双击时间限定范围内,这里预设 300ms,如果不满足,则更新点触时间戳

复制代码
public preTouchTime: number;
@HostListener('touchstart', ['$event'])
_touchstart() {
  const current = new Date().getTime();
  if (this.preTouchTime && current - this.preTouchTime < 300) {
    console.log('双击');
  } else {
    this.preTouchTime = current;
  }
}
复制代码

  双击监听实现了,现在需要知道双击在哪,判断 $event 的 target 太麻烦了,直接就用 aggrid 的 rowClick 事件,也记录一个时间戳,如果当次双击的时间范围中,存在点击行的时间戳,那么,说名双击的行~(这里log 了好几遍,确定了触发顺序,touchstart 先触发,之后是 aggrid 的 rowClick 行点击事件)

复制代码
public preRowTouchTime: number;
@HostListener('touchstart', ['$event']) _touchstart() { const current = new Date().getTime(); if (this.preTouchTime && current - this.preTouchTime < 300) { console.log('双击'); if (this.preTouchTime < this.preRowTouchTime && this.preRowTouchTime < current) { console.log('行双击'); } } else { this.preTouchTime = current; } }
复制代码

  点触版双击搞定!

posted @   名字不好起啊  阅读(179)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示