博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
彻底解决低端安卓手机touchend事件不触发(考虑scroll)
阅读量:6259 次
发布时间:2019-06-22

本文共 1351 字,大约阅读时间需要 4 分钟。

本次移动端开发时遇见了安卓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;
}

 

转载于:https://www.cnblogs.com/ytu2010dt/p/5767491.html

你可能感兴趣的文章
11月20日学习内容整理:jquery插件
查看>>
SVN与TortoiseSVN实战:补丁详解
查看>>
获取页面中所有dropdownlist类型控件
查看>>
读《淘宝数据魔方技术架构解析》有感
查看>>
[转载]如何破解Excel VBA密码
查看>>
【BZOJ】2563: 阿狸和桃子的游戏
查看>>
redis 中文字符显示
查看>>
顺序图【6】--☆☆
查看>>
Docker Swarm 让你事半功倍
查看>>
javaScript事件(四)event的公共成员(属性和方法)
查看>>
Oracle SID爆破工具SidGuess
查看>>
批处理常用命令总结2
查看>>
Android -- 自定义View小Demo,绘制钟表时间(一)
查看>>
信息检索Reading List
查看>>
自动精简配置&重复数据删除核心技术点及其经济效应探究
查看>>
cncert网络安全周报35期 境内被植入后门的政府网站112个 环比上涨24.4%
查看>>
物联网到底是不是泡沫,且看英特尔交出的答案
查看>>
IPv6太落后了:中国加速服务器援建
查看>>
物理引擎中velocity的单位是个什么鬼?
查看>>
oracle的drop命令
查看>>