彻底解决低端安卓手机touchend事件不触发(考虑scroll)
2016-08-13 10:38
381 查看
本次移动端开发时遇见了安卓4.2系统不能触发touchend的问题,有以下需求。
1. 横滑轮播图
2.下拉刷新页面内容
3.body滚动条不能失效
开始在轮播图touchmove事件中阻止了浏览器默认行为,此时touchend事件可以触发。
然后复制了一份在下拉刷新事件中(此时下拉刷新也OK了)
不过此时新的问题又出来了,页面竟然不能上下滚动了,经过分析得出结论在document的touchmove事件中阻止了浏览器默认行为导致页面不能上下滑动。
最终参考了老外的一篇文章解决此问题。(横滑炒过7认为是拖拽录播图)
下拉刷新时也加上判断条件决定是否阻止浏览器默认行为(竖直滚动超过10阻止浏览器默认行为)
/*获得滚动条位置
*/
function getTopDistance() {
return document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
}
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;
}
相关文章推荐
- 安卓手机的touchend事件不触发问题
- [Phonegap+Sencha Touch] 移动开发16 安卓webview中,input输入框不触发backspace回退键事件的解决办法(带来其他bug,作废)
- 【移动端debug-3】部分安卓机型不触发touchend事件的解决方案
- 解决滑动时不触发touchend事件的bug
- 百度地图手机端单触点单击和长按事件,解决部分手机(小米手机)地图单击事件失效,多触点、拖动依然触发长按的bug
- HTML5:百度地图手机端单触点单击和长按事件,解决部分手机点地图击失效,多触点、拖动依然触发长按的bug
- 移动端开发踩坑日记——安卓4.4.2不触发touchend事件
- 手机网页中,长按会触发系统事件,解决办法。
- Android中Touch事件分析--解决HorizontalScrollView滑动和按钮事件触发问题
- Android中Touch事件分析--解决HorizontalScrollView滑动和按钮事件触发问题
- 解决NestedScrollView中,在子View上滑动不触发滚动事件,却触发点击事件
- 解决移动端页面滚动后不触发touchend事件
- 解决微信小程序组件scroll-view中bindscrolltolower事件触发不了的问题
- 手机端给父元素绑定了长按事件,但是子元素的点击事件不被触发的解决方法——事件委托
- 百度地图手机端单触点单击和长按事件,解决部分手机(小米手机)地图单击事件失效,多触点、拖动依然触发长按的bug
- 【安卓】给gallery内"控件"挂载事件,滑动后抬起手指时也触发事件(滑动时不应触发)的解决、!
- Android中Touch事件分析--解决HorizontalScrollView滑动和按钮事件触发问题
- 【安卓】给gallery内"控件"挂载事件,滑动后抬起手指时也触发事件(滑动时不应触发)的解决、!
- 彻底解决卡剩余内存低于1G不能安装软件问题,手机无法安装任何软件的仔细看看了。
- CheckBox在ListView中导致其点击事件不会被触发解决方法