知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    js阻止移动端默认事件以及只阻止横向滚动事件方法

    作者:佳明妈 来源:web前端开发 2016-10-20 人气:
    js阻止移动端默认事件,是在相关的touch事件的时候利用event.preventDefault();来阻止默认滚动行为,但是如果要实现阻止横向滚动事件而不阻止竖向滚动行为就要写一个方法通过手指滑动的

    js阻止移动端默认事件,是在相关的touch事件的时候利用event.preventDefault();来阻止默认滚动行为,但是如果要实现阻止横向滚动行为而不阻止竖向滚动行为就要写一个方法通过手指滑动的偏移量来判断了。
    在手机移动端手指在滑动整个屏幕时,会影响浏览器的行为,比如滚动和缩放。所以在调用touch事件时,所以要先禁止缩放。

    移动端禁止缩放

    通过meta元标签来设置。

    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"></pre>
    

    移动端禁止滚动

    preventDefault是阻止默认行为,touch事件的默认行为就是滚动。

    event.preventDefault();

    只禁止横向滚动而不禁止竖向滚动

    move:function(event){
      //当屏幕有多个touch或者页面被缩放过,就不执行move操作 懒人建站
      if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
      var touch = event.targetTouches[0];
      endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
      isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0; //isScrolling为1时,表示纵向滑动,0为横向滑动
      if(isScrolling === 0){
        event.preventDefault(); //阻止触摸事件的默认行为,即阻止滚屏
      }
    }

    touchmove触发后,会生成一个event对象,在event对象中获取touches触屏列表,取得第一个touch,并记下pageX,pageY的坐标,算出差值,得出手指滑动的偏移量,使当前DOM元素滑动。

    当然move方法要在touchmove事件中调用

    阻止移动端默认事件完整测试代码:

        var startPos = 0,endPos = 0,isScrolling = 0;
        document.addEventListener('touchstart',function(event){
            var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch,取第一个touch
            startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; //取第一个touch的坐标值
            isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动
        }, false);
    
        //解绑事件 web前端开发
        document.addEventListener('touchend',function(event){
            document.removeEventListener('touchmove',this,false);
            document.removeEventListener('touchend',this,false);
        }, false);
    
        document.addEventListener('touchmove',function(event){
            //当屏幕有多个touch或者页面被缩放过,就不执行move操作
            if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
            var touch = event.targetTouches[0];
            endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
            isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0; //isScrolling为1时,表示纵向滑动,0为横向滑动
            if(isScrolling === 1){
                alert(0);
                event.preventDefault(); //阻止触摸事件的默认行为,即阻止滚屏
            }
        }, false);
    
    参考:http://www.cnblogs.com/zourong/p/3913446.html

    ↓ 查看全文

    js阻止移动端默认事件以及只阻止横向滚动事件方法由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    js阻止移动端默认事件以及只阻止横向滚动事件方法-最新评论