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

发表于
js阻止移动端默认事件，是在相关的touch事件的时候利用event.preventDefault();来阻止默认滚动行为，但是如果要实现阻止横向滚动事件而不阻止竖向滚动行为就要写一个方法通过手指滑动的
js阻止移动端默认事件，是在相关的touch事件的时候利用event.preventDefault();来阻止默认滚动行为，但是如果要实现阻止横向滚动行为而不阻止竖向滚动行为就要写一个方法通过手指滑动的偏移量来判断了。

在手机移动端手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。所以在调用touch事件时，所以要先禁止缩放。

移动端禁止缩放

通过meta元标签来设置。

1
<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();

只禁止横向滚动而不禁止竖向滚动
1
2
3
4
5
6
7
8
9
10
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事件中调用

阻止移动端默认事件完整测试代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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);
例如
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<script type = "text/javascript">
  document.addEventListener('targetTouches', function(event) {
    move(event);
    event.preventDefault();
  })
  function move(event) {
    if(event.changedTouches.length > 1 || event.scale && event.scale !== 1) return;
  　　var touch = event.changedTouches[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(); //阻止触摸事件的默认行为，即阻止滚屏
  　　}
  };
</script>
##### h5页面在移动端浏览器中旋转自适应
<script type="text/javascript">
  window.addEventListener('resize', dpr);
  dpr('init');
  function dpr(type) {
    var d = document;
    const desWidth = 750;
    var _dpr = (1 / window.devicePixelRatio);
    var orientation =
      screen.orientation && screen.orientation.type === 'portrait-primary' ? 0 : (window.orientation === 0 ? 0 : -90);
    console.log('type:' + type + ' orientation:' + orientation);
    _dpr = 1;
    const _MaxWidth = 414 * window.devicePixelRatio;
    const userAgent = navigator.userAgent;
    var widthStr = 'device-width';
    var isMobile = true;
    var iWidth = 0;
    var _html = d.getElementsByTagName('html')[0];
    /* eslint eqeqeq: 0 */
    if (userAgent.toLowerCase().indexOf('iphone') == -1 && userAgent.toLowerCase().indexOf('android') == -1) {
      isMobile = false; // iWidth = _MaxWidth;
      widthStr = iWidth + 'px';
    }
    d.querySelector('[name="viewport"]').setAttribute('content',
      'width=' + widthStr + ' , initial-scale=' + _dpr + ', maximum-scale=' + _dpr + ', minimum-scale=' + _dpr + ', user-scalable=no');
    // 竖屏
    if (orientation === 0) {
      iWidth = Math.min(d.documentElement.clientWidth, window.innerWidth);
    } else {
      iWidth = Math.min(d.documentElement.clientWidth, window.innerWidth, window.innerHeight);
    }
    console.log('clientWidth:' + d.documentElement.clientWidth + ' innerWidth:' + window.innerWidth + ' innerHeight:' + window.innerHeight);
    console.log('iWidth: ' + iWidth + ' desWidth: ' + desWidth);
    if (!isMobile) iWidth = _MaxWidth;
    _html.style.fontSize = (((100 * iWidth) / desWidth)) + 'px';
    _html.dataset.dpr = 1; // window.devicePixelRatio;
  };
</script>