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

彻底解决低端安卓手机touchend事件不触发(考虑scroll)的更多相关文章

  1. 安卓手机的touchend事件不触发问题

    问题描述 $(document).on("touchstart touchmove",".btn-highlight",function(event){ $(t ...

  2. 解决红米等手机(移动端)无法触发touchend事件

    触屏事件的简单描述: js的触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是 pageX和 pageY,表示X坐标,Y坐标.touchs ...

  3. 解决内部元素onMouseOver/onMouseOut事件冒泡触发父元素的相应事件

    前阵子为BS项目模板做了一个左侧滑动信息栏,效果类似于windows状态栏的自动隐藏效果,鼠标移进滑出,鼠标移出隐藏,浮动时不占用空间,也可以固定住占一块位置.做的过程中遇到一个问题,鼠标在信息栏内部 ...

  4. 部分安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法

    前端JS中使用XMLHttpRequest 2上传图片到服务器,PC端和大部分手机上都正常,但在少部分安卓手机上上传失败,服务器上查看图片,显示字节数为0.下面是上传图片的核心代码: HTML < ...

  5. 【移动端debug-3】部分安卓机型不触发touchend事件的解决方案

    最近在项目中遇到一个奇怪的问题,有一个需求是这样:页面上有一个按钮,滚动页面时让它消失,停止滚动时让它显示. 常规思路: step1.监听touchstart事件,记录Touch对象中pageY初始值 ...

  6. 解决安卓手机input获取焦点时会将底部固定定位按钮顶起的问题

    一个页面上有个固定在底部的按钮,页面中有个input框,点击input框获取焦点时,在苹果手机上没事,但在安卓手机上弹出的键盘会将按钮顶起来,这就很不好看了,想了个办法解决一下.之前一直觉得用inpu ...

  7. 解决移动端页面滚动后不触发touchend事件

    解决移动端页面滚动后不触发touchend事件 问题 在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. ...

  8. 解决vue低版本安卓手机兼容性问题

    低版本的安卓手机可能会白屏,是由新特性不支持引起的 解决代码es6新特性兼容问题 1,npm 安装 npm install babel-polyfill npm install es6-promise ...

  9. css 字体上下居中显示 解决安卓手机line-height的偏差

      1.字体左右居中显示 text-align: center   <div class="font"> 上下居中 </div> .font{ width: ...

随机推荐

  1. CF2.C

    C. Vladik and fractions time limit per test 1 second memory limit per test 256 megabytes input stand ...

  2. centos上安装pygame

    安装前依赖包检查及安装 python-devel SDL_image-devel SDL_mixer-devel SDL_ttf-devel SDL-devel numpy subversion po ...

  3. Tomcat 配置续

    为了便于tomcat升级 不用频繁重新修改相关配置文件 不用重新部署原有项目 新建目录将tomcat安装目录中的conf,log,webapp,work文件夹复制到里面,然后将系统变量里的CATALI ...

  4. 下载apk文件浏览器会直接打开并显示乱码的问题

    今天同事反映他的apk文件在自己的老项目中下载有问题:下载apk文件浏览器会直接打开并显示乱码,在别的项目中就没有问题. 后分析response的content-type发现,老项目的类型是text/ ...

  5. 有Maple T.A.自有试题图so easy

    对于想完全控制试题库的用户而言,Maple T.A.是最好的选择.不论您是要利用现有的题库,还是要创建自己的题库,Maple T.A.都可以为您提供功能强大.操作便捷的工具创建数学内容. 1) Ste ...

  6. FFT时域与频域的关系,以及采样速率与采样点的影响

    首先对于FFT来说,输入的信号是一个按一定采样频率获得的信号序列,而输出是每个采样点对应的频率的幅度(能量). 下面详细分析: 在FFT的输出数据中,第一个值是直流分量的振幅(这样对应周期有无穷的可能 ...

  7. ASP.Net MVC开发基础学习笔记:三、Razor视图引擎、控制器与路由机制学习

    一.天降神器“剃须刀” — Razor视图引擎 1.1 千呼万唤始出来的MVC3.0 在MVC3.0版本的时候,微软终于引入了第二种模板引擎:Razor.在这之前,我们一直在使用WebForm时代沿留 ...

  8. 【Java并发编程实战】-----“J.U.C”:锁,lock

    在java中有两种方法实现锁机制,一种是在前一篇博客中([java7并发编程实战]-----线程同步机制:synchronized)介绍的synchronized,而另一种是比synchronized ...

  9. 分享自己写的JS版日期格式化和解析工具类,绝对好用!

    前言 本来想模仿Java里面的SimpleDateFormat()对象的,但是感觉这样用起来不方便,所以还是直接写成单独的方法算了. 原文链接 日期格式化 使用说明 formatDate(date, ...

  10. 【原】Python用例:将指定文件或目录打包成zip文件

    #This Demo is used to compress files to .zip file #Base on Windows import os import time #The files ...