Vue 中,v-if 和 v-show 在 touchmove事件 上的不同表现?

作者站长头像
站长
· 阅读数 23

背景: 我要实现的功能大概是一个 video 标签的自定义进度条。用户可以进行拖拽进行快进和后退。

下面这段代码是我的思路。首先我构造了一个父容器 div,container

1: 当用户没开始触摸进度条的时候, 我展示一个默认的黑色进度条给用户。

2: 当用户开始触摸进度条的时候,我会通过变量 isDragingProgressbar 来切换另一个假的进度条给用户来拖拽,颜色是白色Vue 中,v-if 和 v-show 在 touchmove事件 上的不同表现?

在这两个进度条切换的时候,引发下面我的问题。

问题出现场景:当我拖拽进度条的时候,此时切换为了下面的 v-else 逻辑的 白色进度条。但是这时候,父元素 container 身上的 touchmove 事件失效了,并且没有触发 touchend 事件。

我初步怀疑是 v-if 导致的,于是我又切换成了 v-showVue 中,v-if 和 v-show 在 touchmove事件 上的不同表现?

果然问题就解决了

问题: 我不是把事件委托到了 container 元素上吗?子元素的 v-if 切换怎么会导致父组件的 touch 事件有问题呢?不是特别明白这里面的原因。

回复
1个回答
avatar
test
2024-07-03

已经解决,这个问题是 v-if 切换时,会丢失这个元素的 touch 事件。使用 v-show 不会,好像确实是 JS 本身和 CSS 的问题。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容