代碼環(huán)境

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

Bug表現(xiàn)：

<swiper-slide>包含<video>元素，鼠標(biāo)落在<video>元素拖動(dòng)時(shí)，控制臺(tái)報(bào)錯(cuò)，swiper無法正常拖動(dòng)

調(diào)試過程：

1、查看錯(cuò)誤發(fā)生的調(diào)用順序：可以看到是因?yàn)閜alyer的onElementTouchend事件導(dǎo)致

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

3、去除可能干擾判斷的元素，判斷問題來源
（1）去除<video>，swiper表現(xiàn)正常
（2）仔細(xì)觀察發(fā)現(xiàn)頁面高度溢出并可滾動(dòng)

4、推測(cè)發(fā)生原因：
<swiper-slide>內(nèi)的元素高度超過外層元素的高度，并設(shè)置了可滾動(dòng)，在手指上下劃動(dòng)時(shí)，觸發(fā)了元素滾動(dòng)，從而導(dǎo)致swiper切換失敗

5、修復(fù)問題并測(cè)試

6、swiper監(jiān)聽touchend事件，處理業(yè)務(wù)邏輯

<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) {// 下一個(gè)視頻swiperRef.value?.slideTo?.(2, 300, true)} else if (touchendY - touchstartY > 80) {// 上一個(gè)視頻swiperRef.value?.slideTo?.(0, 300, true)}touchstartY = 0 } // swipe切換的過渡動(dòng)畫結(jié)束時(shí)，回到放置播放器的swiper-slide // 在這個(gè)節(jié)點(diǎn)復(fù)位可以讓用戶感知到視頻在切換 function onTransitionEnd(e: any) {videoStore.getShortVideo(active.value === 1 ? '0' : '1' )swiperRef.value?.slideTo?.(1, 0, false) }

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。