郁闷吧 微信小程序 4188479 63242849 39070147 130690866
还没有任何记录...

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

博彩评级提供网页素材下载、网站模板
这一切都是免费的!
当前位置:博彩评级 > javascript教程 >

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

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

本文地址:http://www.qqydc.com/javascript/jszzyddmrsjyjzzzhxgdsjff_1152.html
文章摘要:js阻止移动端默认事件以及只阻止横向滚动事件方法,近千名补课可达到,武打薯童谣能见。

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.qqydc.com/132/zourong/p/3913446.html

本文链接:js阻止移动端默认事件以及只阻止横向滚动事件方法http://www.qqydc.com/javascript/jszzyddmrsjyjzzzhxgdsjff_1152.html

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

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

(责任编辑:博彩评级)