关于移动端页面中上下、左右滑动与点击事件冲突问题

海岛暖风
  • 375

问题:
在一个h5移动端页面中,
存在这样父子关系:上下滑动元素=>左右滑动元素=>点击元素
如果这个页面中存在上下滑动(下拉刷新) 、左右滑动(轮播切换)以及点击事件(轮播item内容点击后跳转对应页面)的时候,手势在轮播区域交互的话,三个事件都会同时触发(发生冲突).

尝试过的解决方法
1、阻止冒泡
假如我在轮播的左右滑动元素里加入阻止向上冒泡,防止滑动的时候冒泡到父级触发上下滑动,会出现只能触发左右元素,而无法触发上下滑动了,希望的是左右滑动的时候才不去触发上下滑动,而不是在左右滑动的元素里永远都不能上下滑动
2、阻止捕获
假如我在轮播的左右滑动元素里加入阻止向下捕获,那么 点击事件元素永远都不会触发点击事件

示例说明图:
图片描述

问题求解:如何让三者事件保持独立 互相不影响

回复
阅读 4.7k
1 个回答
李十三
  • 13.2k
✓ 已被采纳

这三个事件本来都是独立的触发条件 不会互相影响 难道既能向下又能向右?那就是斜着滑 斜着滑要有一个角度判定是斜着向下还是斜着向右
你的事件是怎么写的 自己写的还是用的框架

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏