欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實(shí)現(xiàn)移動(dòng)端禁止下拉露出網(wǎng)址廣告屏蔽技巧

 更新時(shí)間:2022年06月01日 17:11:58   作者:殺破狼1914  
這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)移動(dòng)端禁止下拉露出網(wǎng)址或的廣告屏蔽技巧示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

需求

移動(dòng)端禁止下拉 露出網(wǎng)址或廣告

查找解決方案

基本都是

document.body.addEventListener('touchmove', function (e) { e.preventDefault() }, { passive: false })

就很離譜,這樣會(huì)導(dǎo)致scroll無(wú)法滾動(dòng)。

我的解決方案

function stopDown(el) {
    let startX, startY;
    // el是最外層div 
    el.addEventListener("touchstart", (e) => {
        startX = e.changedTouches[0].pageX;
        startY = e.changedTouches[0].pageY;
    })
    el.addEventListener("touchmove", (e) => {
        //獲取滑動(dòng)屏幕時(shí)的X,Y
        let endX = e.changedTouches[0].pageX;
        let endY = e.changedTouches[0].pageY;
        //獲取滑動(dòng)距離
        let distanceX = endX - startX;
        let distanceY = endY - startY;
        //判斷滑動(dòng)方向
        if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 0) {
            // console.log('往右滑動(dòng)');
        } else if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX < 0) {
            // console.log('往左滑動(dòng)');
        } else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY < 0) {
            // console.log('往上滑動(dòng)');
        } else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY > 0) {
            // 核心在這  
            // path 是從觸摸點(diǎn)到最外層所有祖先節(jié)點(diǎn)的集合,不了解就log看下
            let path = e.path
            let is_scrollTop = false
            // 從觸摸點(diǎn)到最外層所有祖先節(jié)點(diǎn) scrollTop不為0就不禁止下拉 為0 就禁止下拉
            for (let dom of path) {
                if (dom.scrollTop) {
                    is_scrollTop = true
                }
            }
            if (!is_scrollTop) {
                e.preventDefault()
                return false
            }
            // console.log('往下滑動(dòng)');
        } else {
            // console.log('點(diǎn)擊未滑動(dòng)');
        }
    })
}

目前自測(cè)安卓 微信內(nèi)、uc、小米瀏覽器 效果都不錯(cuò),更多關(guān)于移動(dòng)端禁止下拉廣告網(wǎng)址的相關(guān)技巧請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • js點(diǎn)擊按鈕實(shí)現(xiàn)多張圖片循環(huán)切換

    js點(diǎn)擊按鈕實(shí)現(xiàn)多張圖片循環(huán)切換

    這篇文章主要為大家詳細(xì)介紹了js點(diǎn)擊按鈕實(shí)現(xiàn)多張圖片循環(huán)切換,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-01-01
  • FireFox的getYear的注意事項(xiàng)

    FireFox的getYear的注意事項(xiàng)

    FireFox的getYear的注意事項(xiàng)...
    2007-04-04
  • 教你JS更簡(jiǎn)單的獲取表單中數(shù)據(jù)(formdata)

    教你JS更簡(jiǎn)單的獲取表單中數(shù)據(jù)(formdata)

    這篇文章主要介紹了JS更簡(jiǎn)單的獲取表單中數(shù)據(jù)(formdata),本文給大家分享的js獲取表單數(shù)據(jù)更簡(jiǎn)潔,通過(guò)兩種方法結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2023-05-05
  • layer.open回調(diào)獲取彈出層參數(shù)的實(shí)現(xiàn)方法

    layer.open回調(diào)獲取彈出層參數(shù)的實(shí)現(xiàn)方法

    今天小編就為大家分享一篇layer.open回調(diào)獲取彈出層參數(shù)的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2019-09-09
  • js金額數(shù)字格式化實(shí)現(xiàn)代碼(加減逗號(hào)處理)

    js金額數(shù)字格式化實(shí)現(xiàn)代碼(加減逗號(hào)處理)

    這篇文章主要介紹了js中將數(shù)字格式化為金額的方法,使用加減逗號(hào)處理金額,一個(gè)格式化金額的代碼,有需要的朋友參考下
    2014-04-04
  • 在小程序Canvas中使用measureText的方法示例

    在小程序Canvas中使用measureText的方法示例

    有時(shí)候我們?cè)谑褂肅anvas繪制一段文本時(shí),會(huì)需要通過(guò)measureText()方法獲取文本的寬度,本文主要介紹了在小程序Canvas中使用measureText的方法示例,需要的朋友可以參考下
    2018-10-10
  • 在線演示常用javascript特效

    在線演示常用javascript特效

    圖形顯示特效鼠標(biāo)驅(qū)動(dòng)圖片變化隨機(jī)顯示banner圖片隨意移動(dòng)圖片定期消失字符連續(xù)消隱文字不停變色JavaScript容錯(cuò)...圖片循環(huán)顯現(xiàn)QQ菜單生成器圖形顯示特效連續(xù)滾動(dòng)的圖片圖片水中倒影純JavaScript時(shí)鐘圖片翻滾導(dǎo)航星星滿天閃爍左側(cè)的極酷...
    2008-04-04
  • js 事件處理函數(shù)間的Event物件是否全等

    js 事件處理函數(shù)間的Event物件是否全等

    在非IE,事件對(duì)象Propagation之間的處理函數(shù),或同dom節(jié)點(diǎn)觸發(fā)的多個(gè)函數(shù)之間的Event物件是全等的。與綁定形式[addEventListener/DOM0]無(wú)關(guān)。
    2011-04-04
  • JS值當(dāng)前DIV的ID值的代碼

    JS值當(dāng)前DIV的ID值的代碼

    JS值當(dāng)前DIV的ID值的代碼...
    2007-05-05
  • JavaScript中this綁定規(guī)則你理解了嗎

    JavaScript中this綁定規(guī)則你理解了嗎

    JavaScript中的this是一個(gè)非常重要的概念,也是一個(gè)令新手開(kāi)發(fā)者甚至有些不深入理解的多年經(jīng)驗(yàn)開(kāi)發(fā)者都會(huì)感到困惑的概念,如果你希望自己能夠使用this編寫更好的代碼或者更好理解他人的代碼,就跟隨小編一起理解一下this吧
    2023-07-07

最新評(píng)論