zoukankan      html  css  js  c++  java
  • 彻底解决低端安卓手机touchend事件不触发(考虑scroll)

    本次移动端开发时遇见了安卓4.2系统不能触发touchend的问题,有以下需求。

    1. 横滑轮播图

    2.下拉刷新页面内容

    3.body滚动条不能失效

    开始在轮播图touchmove事件中阻止了浏览器默认行为,此时touchend事件可以触发。

    //拖拽轮播图
    parentNode.addEventListener('touchmove',function(e) { e.preventDefault(); })

     然后复制了一份在下拉刷新事件中(此时下拉刷新也OK了)

    //下拉刷新代码  
    document.addEventListener('touchmove', function(e) {
            if (getTopDistance() <= 10) {
                    e.preventDefault();
            }
        });
    

     不过此时新的问题又出来了,页面竟然不能上下滚动了,经过分析得出结论在document的touchmove事件中阻止了浏览器默认行为导致页面不能上下滑动。

    最终参考了老外的一篇文章解决此问题。(横滑炒过7认为是拖拽录播图)

         parentNode.addEventListener('touchmove',function(e) {
                    var _x = e.touches[0].pageX;
                    if((Math.abs(_x-parentNode.startX)>7)){
                        e.preventDefault();
                    }
                    e.stopPropagation();
                }) 
    

     下拉刷新时也加上判断条件决定是否阻止浏览器默认行为(竖直滚动超过10阻止浏览器默认行为)

    document.addEventListener('touchmove', function(e) {
          
            if (getTopDistance() <= 10) {//当滚动条位置小于10
                // alert('<');
                var _x = e.touches[0].pageX;
                var _y = e.touches[0].pageY;
    
                if (_y - obj.y > 10) {//滚动距离大于10
                    e.preventDefault();
         
                }
    
            }
        });

    /*获得滚动条位置
    */
    function getTopDistance() {
    return document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    }

  • 相关阅读:
    程序测试与调试
    运行及总结
    《人,绩效和职业道德》及博客读后感
    图书馆管理系统程序设计
    设计类图
    图书馆管理系统程序测试计划
    图书馆管理系统UML建模
    团队分工
    竞争性需求分析
    实践作业三 结对项目
  • 原文地址:https://www.cnblogs.com/ytu2010dt/p/5767491.html
Copyright © 2011-2022 走看看