代碼環境

"vue": "^3.2.33", "swiper": "^8.4.2",

Bug表現：

<swiper-slide>包含<video>元素，鼠標落在<video>元素拖動時，控制臺報錯，swiper無法正常拖動

調試過程：

1、查看錯誤發生的調用順序：可以看到是因為palyer的onElementTouchend事件導致

2、提煉關鍵字并搜索
（1）方案一：修改swiper源碼（不采用）
（2）方案二：touch-action: false（無效）

3、去除可能干擾判斷的元素，判斷問題來源
（1）去除<video>，swiper表現正常
（2）仔細觀察發現頁面高度溢出并可滾動

4、推測發生原因：
<swiper-slide>內的元素高度超過外層元素的高度，并設置了可滾動，在手指上下劃動時，觸發了元素滾動，從而導致swiper切換失敗

5、修復問題并測試

6、swiper監聽touchend事件，處理業務邏輯

<swiper @touchStart="($el, e) => touchstart(e)" @touchEnd="($el, e) => touchend(e)" @slideChangeTransitionEnd="onTransitionEnd" >// 手指按下 let touchstartY = 0 function touchstart(e: any) {touchstartY = e.changedTouches[0]?.clientY || 0 } // 手指松開 function touchend(e: any) {const touchendY = e.changedTouches[0]?.clientYif (touchstartY - touchendY > 80) {// 下一個視頻swiperRef.value?.slideTo?.(2, 300, true)} else if (touchendY - touchstartY > 80) {// 上一個視頻swiperRef.value?.slideTo?.(0, 300, true)}touchstartY = 0 } // swipe切換的過渡動畫結束時，回到放置播放器的swiper-slide // 在這個節點復位可以讓用戶感知到視頻在切換 function onTransitionEnd(e: any) {videoStore.getShortVideo(active.value === 1 ? '0' : '1' )swiperRef.value?.slideTo?.(1, 0, false) }

總結

以上是生活随笔為你收集整理的修复BUG的完整过程：Ignored attempt to cancel a touchend event with cancelable=false的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。