Android 4.0.x 浏览器不触发 ontouchend 事件的解决

先强烈吐槽一下,不知道 Android Wekbit 开发人员怎么想的,如此糟糕 bug 从 4.0 到当下的 4.4 仍然如故,好像没有像修复的意思?难道这是改进不是 bug?

问题是这样的,使用 touch* 事件时,在 Android 4.0 上面的浏览器手指在 a 元素(或者其他任何元素)上做滑动操作,然后手指离开,结果不会触发 touchend 事件。同样的操作在 Android 2.x / ios 却会会正常触发 touchend 事件。到 touchmove 事件之后就终止掉,简单说,就是 touchend 事件丢失。天呐~无疑这是一个非常严重的bug——因为这是一个极其基础的事件,不可或缺!~My God~

看官们不信的话请试试这个测试用例

<div id="foo"></div>
<script>
var el = document.getElementById('foo');
    el.ontouchstart = function(e){
            el.innerHTML = "touch start";
    };
    el.ontouchend = function(e){
            el.innerHTML = "touch end";
    };
    el.ontouchmove = function(e){
            el.innerHTML = "touch moved";
    };
</script>

已经有许多人把该问题 report 了,详见:

怎么破?在 touchmove 事件中 e.preventDetault() 居然就可以。

el.ontouchend = function(e){
   e.preventDefault(); // 可触发了
   el.innerHTML = "touch end";
};
但是简单调用 e.preventDetault() 会导致另外一个问题,就是阻止了屏幕上下滚动的 scorll 事件。

这又怎么破?

最后,我在一位兄台的博客里找到思路《手机浏览器常用手势动作监听封装》,具体思路就是“兼容的解决办法是在 touchmove 时判断手势趋势大于预设值时(大于预设值证明有 move的动作趋势),停止默认的操作e.preventDefault()”。于是我的代码就是这样。

/**
 * touchend事件丢失
 */
function fixTouchEndNotFire(e, a1, a2, a3, disX){
	if(window.navigator.isAndroid_4){
	    if ( disX > 7 ) {
            e.preventDefault();
        }
	} 	
}

加入到 touchmove 事件中。

另外一个方法个人原创(但是也是受了几个前辈的启发),见下面代码:
<script>
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 = myTouchEnd;
</script>
Test onTouchEnd Event if be fired.

在这里抛砖引玉了,如有更好的方法请告知。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sp42a

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值