如何修复移动微信浏览器 touchend上 touchend 事件不触发的bug

来源：蜘蛛抓取(WebSpider) 时间：2015-12-25 10:40 标签： html touchend 不触发
下次自动登录
现在的位置:
& 综合 & 正文
Android 4.0.x 浏览器不触发 ontouchend 事件的解决
一个方法是用 preventDefault()，但不好使，会弄得屏幕上下滚动迟疑。
另外一个方法个人原创（但是也是受了几个前辈的启发），见下面：
var timerId;
document.ontouchmove = function(e){
window.clearInterval(timerId);
timerId = window.setTimeout(myTouchEnd, 200);
// console.log('ddddddd');
// e.preventDefault();
function myTouchEnd(){
alert('why not start!!?')
// document.ontouchend = myTouchE
Test onTouchEnd Event if be fired.
在这里抛砖引玉了，如有更好的方法请告知。
&&&&推荐文章:
【上篇】【下篇】经验151 米
在线时间33 小时
版本4.12.5
积分 195, 距离下一级还需 5 积分
积分 195, 距离下一级还需 5 积分
机型小米手机2/2S
MIUI版本4.12.5
本帖最后由
22:49 编辑
用sencha touch开发框架开发移动webapp的时候，自带浏览器打开后不响应'touchstart', 'touchmove', 'touchend'这几个事件，怎么触摸都没反应 怎么搞？去年就说换浏览器内核了，怎么还没动静？打包成apk之后，调用webview显示网页内容，也是一样的没反应。
开发组倒是给个准啊。
有兴趣的可以拿自己手机去看sencha touch官网的例子。好像就只有小米3的浏览器点了没反应：
http://cdn.sencha.io/touch/sencha-touch-2.3.1/built-examples/kitchensink/index.html
解决办法：
http://blog.csdn.net/lovelyelfpop/article/details/
看我博客，sencha touch 2.4.0解决这个问题了
分享到微信朋友圈
打开微信，点击底部的“发现”，使用 “扫一扫” 即可将网页分享到我的朋友圈。
经验1243 米
在线时间193 小时
版本5.12.4
积分 1485, 距离下一级还需 515 积分
积分 1485, 距离下一级还需 515 积分
机型小米手机4
签到次数116
MIUI版本5.12.4
我的也是一样，开发组要赶快解决啊，哎
经验4796 米
在线时间576 小时
版本5.12.3
安卓M体验计划
积分 6161, 距离下一级还需 13839 积分
积分 6161, 距离下一级还需 13839 积分
机型小米Note
签到次数119
MIUI版本5.12.3
通过手机发布
设置，高级，浏览器标识改成桌面版
在线时间2 小时
版本V6.1.2.0.KXCCNBJ
积分 32, 距离下一级还需 18 积分
积分 32, 距离下一级还需 18 积分
机型小米手机3 TD版
MIUI版本V6.1.2.0.KXCCNBJ
设置，高级，浏览器标识改成桌面版
经测试，问题没有解决
经验1176 米
在线时间66 小时
版本5.12.23
机型小米手机3/4 WCDMA版
签到次数112
MIUI版本5.12.23
麻烦提供一下详细的机型和版本，我在MI3W机型 最新开发版测试 没有遇到反馈的问题
在线时间0 小时
版本JLB54.0
积分 28, 距离下一级还需 22 积分
积分 28, 距离下一级还需 22 积分
机型小米手机2/2S
MIUI版本JLB54.0
如何解决，小米2S同样问题。微信的浏览器就完全没有问题。
Copyright (C) 2015 MIUI
京ICP备号 | 京公网安备5号 | 京ICP证110507号手机端html5触屏事件(touch事件)
touchstart：触摸开始的时候触发
touchmove：手指在屏幕上滑动的时候触发
touchend：触摸结束的时候触发
而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：
touches：当前位于屏幕上的所有手指的列表。
targetTouches：位于当前DOM元素上手指的列表。
changedTouches：涉及当前事件手指的列表。
每个触摸点由包含了如下触摸信息（常用）：
identifier：一个数值，唯一标识触摸会话（touch&session）中的当前手指。一般为从0开始的流水号（android4.1，uc）
target：DOM元素，是动作所针对的目标。
pageX/pageX/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。　
radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持，好在功能不常用，欢迎大家反馈。
var&obj&=&document.getElementByIdx_x('id');
obj.addEventListener('touchmove',&function(event)&{
&&&&&//&如果这个元素的位置内只有一个手指的话
&&&&if&(event.targetTouches.length&==&1)&{
　　　　&event.preventDefault();//&阻止浏览器默认事件，重要&
&&&&&&&&var&touch&=&event.targetTouches[0];
&&&&&&&&//&把元素放在手指所在的位置
&&&&&&&&obj.style.left&=&touch.pageX-50&+&'px';
&&&&&&&&obj.style.top&=&touch.pageY-50&+&'px';
},&false);
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。收藏，6.7k 浏览
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
touch事件会穿透页面，电脑上chrome模拟不会有，但手机上实际操作会出现
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
穿透（点穿）是在mobile各种浏览器上发生的常见的bug。可能是由click事件的延迟或者事件冒泡导致。
移动web开发常用的Zepto库中的touch和tap事件就会有点穿的bug（Zepto的事件都绑在Document上）。
常用的解决方案如下：
1 使用，这个可以非常完美的解决点穿问题。
2 在touchend事件回调中加入preventDefault, 并在下一层中加上pointer-events:none。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
移动端的click都是touch之后，才会模拟触发。
触发的顺序是
touchstart
mouseenter
在重叠的区域里，被遮盖的元素绑定click，遮盖的元素绑定touch事件，且touch后遮盖的元素会隐藏的话，就会造成穿透，因为click是在touch之后延迟触发的，浏览器会误认为是在遮盖的元素上触发了click。
最好的解决方案是 自己通过touchstart，touchmove，touchend，来模拟一个click（tap）事件，这样除了防止穿透外，事件响应速度也会提高。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
6月2日 回答
今天我也碰到了这个问题, 最后用区域点击来替代.
假如发生穿透(或者说你需要点击)的元素在一个固定的位置.
那你可以获取这个元素的位置和大小,
然后在点击的时候获取手指的坐标, 确定这个坐标在元素所处的位置, 你就可以执行相应的操作.
期间会用到 touches[0].pageX, touches[0].pageY, document.body.scrollTop 这三个属性.
这种替代方法适用于少量的模拟, 比如我在做的这个, 位置固定在顶部, 只有打开和关闭两种情况.
菜单关闭的情况下按钮位于右上角,
菜单打开以后, 按钮被推到偏左上角.
这些位置都是可以计算得出来的.
同步到新浪微博
分享到微博？
与我们一起探索更多的未知
专业的开发者技术社区，为用户提供多样化的线上知识交流，丰富的线下活动及给力的工作机会
加入只需一步
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要举报该，理由是：
扫扫下载 App
SegmentFault
一起探索更多未知

我要回帖

更多关于 html touchend 不触发 的文章

 

随机推荐