问题记录解决滑动冲突问题 - 监听滑动事件，阻止滑动事件冒泡

Posted 2022-12-16 黑子Kuroko

业务场景：

父容器是一个支持左右滑动切换的Tab页，子组件是一个支持左右滚动的div内容展示。当左右滑动子组件内容时，会同时触发Tab滑动切换，与预期不符。

解决方案：

如果是vue框架的话，可以在该子组件节点上加一个监听属性即可：@touchend.stop

解决思路很简单，就是监听对应元素element的滑动事件，禁止向上冒泡即可。

<div class="demo" @touchend.stop>
  <!-- 滑动内容 -->
</div>

如果是其他框架的话，在了解实现原理之后，可以尝试以下代码：

const targetElement = document.getElementById('targetElement');
targetElement.addEventListener('touchmove', function (e) 
  // 查看事件对象
  // console.log(e);
  // 阻止默认事件
  // e.preventDefault();
  // 阻止冒泡事件
  e.stopPropagation();
);

参考&学习：

怎么阻止touchstart touchend事件冒泡 - SegmentFault 思否

事件处理 | Vue.js

event.preventDefault - Web API 接口参考 | MDN

事件参考 | MDN