我们在用 JavaScript 做一些页面特效的时候,为了适配移动端的操作方式,可能会需要制作一些滑动的效果。但是现在很多移动端浏览器都支持一些滑屏手势,比如滑动屏幕前进后退,以及滚动条等等。这样就会引起冲突,使我们做的效果不能如愿实现。

就如我最近写了个2048小游戏,需要滑动来移动数字方块,但是上滑下滑却滑动了滚动条,左右滑又变成了前进后退,简直不能愉快的玩游戏!!!!

但是我们通过 JavaScript 禁止浏览器默认的一些滑动效果。

只需要在页面就绪事件中插入以下代码:

    var mo=function(event){
        if (event.cancelable) {
            // 判断默认行为是否已经被禁用
            if (!event.defaultPrevented) {
                event.preventDefault();
            }
        }
    }
    function stop(){
        document.addEventListener("touchmove",mo,false);//禁止页面滑动
    }
    stop();

另外,上面代码中,判断默认行为是否已经被禁用是有必要的,如果不判断,直接就写 event.preventDefault(); 的话,会有如下报错出现,虽然没什么太大影响,但是对强迫症来说有报错着实很难受。

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
See