addEventListener與removeEventListener 精進(jìn)記錄

這兩天開(kāi)發(fā)移動(dòng)端H5因?yàn)閕os 自帶的滑動(dòng)屬性導(dǎo)致頁(yè)面里滑動(dòng)時(shí)ios系統(tǒng)下 在邊界滑動(dòng)動(dòng)畫(huà)未結(jié)束前 滑動(dòng)頁(yè)面導(dǎo)致頁(yè)面無(wú)法滑動(dòng),需等待ios邊界動(dòng)畫(huà)結(jié)束后才能滑動(dòng)。
由于頁(yè)面是微前端 出問(wèn)題的和真正能簡(jiǎn)單控制的層面在我項(xiàng)目外面了
網(wǎng)上一頓找方法 沒(méi)什么吊用 出問(wèn)題的不在我這里

 overflow: hidden;
overscroll-behavior: none;
-webkit-overflow-scrolling: auto;
overflow-scrolling: auto;   

于是就找到監(jiān)聽(tīng)touchmove的方法

addEventListener的時(shí)候e.preventDefault();
removeEventListener的時(shí)候也這么弄一下不就行了;
結(jié)果您猜怎么著 對(duì) 就是不行

之前從來(lái)沒(méi)有仔細(xì)的研究過(guò)這里

這是我之前的寫(xiě)法

const checkedTarget = (e) => {
  if (!isTarget) {
    e.preventDefault();
  }
}

document.addEventListener('touchmove', (e) => {
      checkedTarget(e)
    }, { passive: false });

// 觸摸移動(dòng)事件
document.removeEventListener('touchmove', (e) => {
      checkedTarget(e)
    }, { passive: false });


實(shí)際是錯(cuò)的
網(wǎng)上一頓找 智障ai也問(wèn)了一堆 沒(méi)d用
最后偶然間看到網(wǎng)上的大佬說(shuō)了這么一句話 我悟了:

一:相同事件綁定和解除,需要使用共用函數(shù);

二:共用函數(shù)不能帶參數(shù);

于是我改成

document.addEventListener('touchmove', checkedTarget, { passive: false });
document.removeEventListener('touchmove', checkedTarget, { passive: false });

補(bǔ)充一下這樣寫(xiě)也是不對(duì)的 因?yàn)椴粷M足第一個(gè)條件

document.addEventListener('touchmove', (e) => e.preventDefault(), { passive: false });

// 觸摸移動(dòng)事件
document.removeEventListener('touchmove', (e) =>e.preventDefault(), { passive: false });

至此,彩筆藝術(shù)已成!

后來(lái)我找到更簡(jiǎn)單的辦法 在自己的頁(yè)面不想讓滑動(dòng)的位置可以給設(shè)置屬性 無(wú)論是動(dòng)態(tài)設(shè)還是css寫(xiě)死 均可
給不想讓ios用戶點(diǎn)擊能滑動(dòng)的地方設(shè)置上 這些地方在安卓機(jī)上本來(lái)也是滑動(dòng)不了的
一行代碼能解決的問(wèn)題 由于pc上沒(méi)有ios模擬器以及沒(méi)有用ios手機(jī)本地調(diào)試 需要改完打包發(fā)版 借手機(jī)看效果 被我研究了多半天的時(shí)間 恨自己菜啊

touch-action: none;

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容