彻底解决低端安卓手机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;
}
彻底解决低端安卓手机touchend事件不触发(考虑scroll)的更多相关文章
- 安卓手机的touchend事件不触发问题
问题描述 $(document).on("touchstart touchmove",".btn-highlight",function(event){ $(t ...
- 解决红米等手机(移动端)无法触发touchend事件
触屏事件的简单描述: js的触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是 pageX和 pageY,表示X坐标,Y坐标.touchs ...
- 解决内部元素onMouseOver/onMouseOut事件冒泡触发父元素的相应事件
前阵子为BS项目模板做了一个左侧滑动信息栏,效果类似于windows状态栏的自动隐藏效果,鼠标移进滑出,鼠标移出隐藏,浮动时不占用空间,也可以固定住占一块位置.做的过程中遇到一个问题,鼠标在信息栏内部 ...
- 部分安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
前端JS中使用XMLHttpRequest 2上传图片到服务器,PC端和大部分手机上都正常,但在少部分安卓手机上上传失败,服务器上查看图片,显示字节数为0.下面是上传图片的核心代码: HTML < ...
- 【移动端debug-3】部分安卓机型不触发touchend事件的解决方案
最近在项目中遇到一个奇怪的问题,有一个需求是这样:页面上有一个按钮,滚动页面时让它消失,停止滚动时让它显示. 常规思路: step1.监听touchstart事件,记录Touch对象中pageY初始值 ...
- 解决安卓手机input获取焦点时会将底部固定定位按钮顶起的问题
一个页面上有个固定在底部的按钮,页面中有个input框,点击input框获取焦点时,在苹果手机上没事,但在安卓手机上弹出的键盘会将按钮顶起来,这就很不好看了,想了个办法解决一下.之前一直觉得用inpu ...
- 解决移动端页面滚动后不触发touchend事件
解决移动端页面滚动后不触发touchend事件 问题 在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. ...
- 解决vue低版本安卓手机兼容性问题
低版本的安卓手机可能会白屏,是由新特性不支持引起的 解决代码es6新特性兼容问题 1,npm 安装 npm install babel-polyfill npm install es6-promise ...
- css 字体上下居中显示 解决安卓手机line-height的偏差
1.字体左右居中显示 text-align: center <div class="font"> 上下居中 </div> .font{ width: ...
随机推荐
- PDF转JPG
问题:对于上次解决PB调用不起PDF插件的问题,所以将PDF转换为HTML.但是转换完之后发现一个问题,pdf2htmlEX插件转换出的html只支持IE9以上,IE9以下的都会各式错乱, 所以只能换 ...
- 基于struts2和hibernate的分页实现
在拜读了各位大牛的博客后,加以修改和添加总算是借鉴出了一个可行的分页实现.(●'◡'●) 话不多说,先贴两张效果图吧 接下来是实现代码: pagingDAOImpl.java public class ...
- 简单的ATM取款过程
一个简单的ATM的取款过程是这样的:首先提示用户输入密码(pwd),最多只能输3次,超过三次则提示用户“密码已输入三次错误,请取卡.“结束交易.如果用户密码正确,在提示用户输入金额(money),AT ...
- 安卓初級教程(5):TabHost的思考
package com.myhost; import android.os.Bundle; import android.view.LayoutInflater; import android.wid ...
- TDDL分库分表规则
规则如下: 判断一个ID在哪个库里的公式是:id % 4 / 2判断一个ID在哪个表里的公式是:id % 4 % 2 其中4表示总共有多少个分表,2表示总共有多少个数据库:上面这个例子,表示总共有2个 ...
- 关于新加坡IT薪酬
很多朋友发邮件或留言问我关于新加坡IT薪酬的问题,由于前段时间比较忙,所以没有及时一一回复,在此表示抱歉. 新加坡IT薪酬范围大概如下(月薪,新加坡币对人民币为1:5): Junior Develop ...
- C/C++ makefile自动生成工具(comake2,autotools,linux),希望能为开源做点微薄的贡献!
序 在linux下C或C++项目开发,Makefile是必备的力气,但是发现手写很麻烦. 在百度有个comake2工具,用于自动生成Makefile工具,而在外边本想找一个同类工具,但发现 ...
- C# Azure 存储-队列
1.前言 本篇文章是根据Azure的官网document总结,如果想直接跳过本文章,可以点击下面的链接进入. https://www.azure.cn/zh-cn/documentation/arti ...
- xamarin 手机顶部状态栏
修改显示xamarin开发的App的手机顶部状态栏, 步骤一:在项目UWP上的“引用”里右键“添加引用”,选择->Universal Windows->Windows Mobile Ext ...
- 预处理(防止sql注入的一种方式)
<!--- 预处理(预编译) ---><?php/* 防止 sql 注入的两种方式: 1. 人为提高代码的逻辑性,使其变得更严谨,滴水不漏. 比如说 增加判断条件,增加输入过滤等,但 ...