Swiper结合Echarts的触摸屏踩坑记录

最近在做关于触摸屏上的网页项目，在使用Swiper + Echarts实现轮播数据展示时发现在触摸屏上的实现效果有一些问题。网上关于这方面的问题似乎比较少，经过研究以后找到了比较完美的解决办法，所以记录一下。这里使用的Swiper组件是5+版本，也许其他版本可能效果不同。

bash 复制代码

npm i swiper@5

具体问题就是当使用触摸屏通过触屏拖动Swiper轮播组件时会出现拖拽卡顿，类似于断触的效果，不能正常地滑动切换轮播，而通过鼠标拖动Swiper轮播组件时可以正常触发滑动切换。另一个问题就是在使用Swiper结合Echarts时，发现触摸屏的touch点击在Chrome浏览器上不能触发内部Echarts折线图的tooltip数据显示。

经过研究测试，大概原因是浏览器本身为了支持绝大多数网页在触摸屏能够正常使用，所以默认在触发touch相关的触摸事件时，同时也会触发对应的mouse鼠标事件，而Swiper组件可以同时被mouse事件和touch事件触发滑动，所以两个事件共同发生就产生了冲突。

第一个问题解决方法有两种，第一种方法是修改Swiper的配置，增加simulateTouch配置项为false，这样会取消Swiper的mouse事件触发滑动，但是这个方法的缺点在于会导致鼠标不能触发轮播切换，如果需要同时支持触摸屏的触摸和鼠标两种操作方式就不适合这个方法。

js 复制代码

const swiper = new Swiper(".swiper-container", {
    simulateTouch: false, // 阻止Swiper的mouse事件触发切换
    threshold: 12, // 滑动阈值，避免touch时误切换
    touchStartPreventDefault: false, // 不阻止touchstart的mousedown默认行为，解决touch不能触发echarts的tooltip的问题
    // 其他配置
});

第二个问题触摸屏不能触发Swiper内部Echarts折线图的tooltip数据显示，是因为Swiper默认会阻止touchstart事件触发的mousedown事件，导致Echarts不能触发tooltip，通过配置项touchStartPreventDefault为false解决这个问题。另外在Edge浏览器上居然不用这个配置也能触发tooltip，我不理解。

第一个问题的第二种解决方法是监听Swiper容器的touchmove事件，使用event.preventDefault();拦截touchmove的浏览器默认行为，也就是阻止默认附带的mousemove事件，这样Swiper在使用触摸屏时就只会被touchmove触发滑动。

js 复制代码

// touchmove处理
function swiperTouchMoveHandle(event) {
  event.preventDefault();
},

// 绑定事件
const swiperWrap = document.querySelector(".swiper-container");
swiperWrap.removeEventListener("touchmove", swiperTouchMoveHandle); // 避免重复调用时重复添加
swiperWrap.addEventListener("touchmove", swiperTouchMoveHandle);

// Swiper部分
const swiper = new Swiper(".swiper-container", {
    threshold: 12, // 滑动阈值，避免touch时误切换
    touchStartPreventDefault: false, // 不阻止touchstart的mousedown默认行为，解决touch不能触发echarts的tooltip的问题
    // 其他配置
});

使用第二种方法可以比较完美的解决这个问题，唯一的问题是event.preventDefault()阻止默认行为可能会阻止一些其他的默认行为，如果有这方面的需求就考虑编写更加复杂的逻辑来判定或者用第一个方法。

另外在触摸屏上滑动浏览器的网页时，可能会触发浏览器边界的像是前进后退之类的滑动行为，可以通过css解决这个问题，阻止这个触底滑动效果。

css 复制代码

html, body { overscroll-behavior: none; }