江苏龙网

  1. 首页 > 生活 > >

安卓平台的浏览器 touchend 事件触发失效

最近几天开发也碰到了这个问题，项目要模拟一个app的向下拉动加载效果。我的解决办法是在touchmove中添加e.preventDefault(),将浏览器默认的滑动惯性去掉，这样就不会干扰到touchend事件的触发，然后再手写滑动效果，另外需要注意判定是否有滑动产生，避免干扰默认的点击效果触发：var x, y, z;var slideCouter = 1;var hasMoved = false;var checking = false;var hasMore = true;$(document).on(\u0026#39;touchstart\u0026#39;, function (e) { z = $(document).scrollTop(); x = event.targetTouches.pageY;}).on(\u0026#39;touchmove\u0026#39;, function (e) { e.preventDefault(); hasMoved = true; y = event.targetTouches.pageY; z += x - y; $(document).scrollTop(z);}).on(\u0026#39;touchend\u0026#39;, function (e) { if (x - y \u0026gt; 200 \u0026amp;\u0026amp; !checking \u0026amp;\u0026amp; hasMoved \u0026amp;\u0026amp; hasMore) { checking = true; slideCouter++; $(\u0026#39;.login\u0026#39;).removeClass(\u0026#39;none\u0026#39;); $.ajax({ url: "\u0026lt;?php echo $this-\u0026gt;createUrl(\u0026#39;/teacher/categoryMore\u0026#39;);?\u0026gt;", type: "get", data: { "keyword": \u0026#39;\u0026lt;?php echo $keyword;?\u0026gt;\u0026#39;, "page": slideCouter }, cache: false, success: function (data) { completecall(data); } }); } hasMoved = false;});==============目前别的方法都会有或多或少的弊端，该方法的弊端就是滑动惯性被取消，自己写的效果会不那么流畅，但还算比较好的解决这个兼容问题。
■网友
touch事件在手机浏览器上存在莫名的兼容性问题, 会导致touchend事件不触发!http://code.google.com/p/android/issues/detail?id=19827Working with touch eventsOn Android ICS if no preventDefault is called on touchstart or the first touchmove, further touchmove events and the touchend will not be fired.As a workaround we need to decide in the first touchmove if this is a scroll (so we don’t call preventDefault) and then manually trigger touchend.如果你没有太多顾虑(关于scroll的), 请在touchstart的handle中使用event.preventDefault(), 即可让touchend事件正常触发
■网友
可以考虑同时监听touchcancel事件。
■网友
@jack king 使用touchcancel这个在android4.4中会出现复制文本之类的 复制文本是什么状况
■网友
我也想知道
■网友
我也遇到了这个问题啊，需要顾虑scroll，阻止默认事件这个行不通，使用touchcancel这个在android4.4中会出现复制文本之类的，这个要怎么解决？ @bo bo
■网友
我要顾虑scroll，怎么解决这个问题啊？


    推荐阅读


    上一篇：怎样分析数据包判断网络故障

    下一篇：是否有可能，以及有必要让每个人的账户都像银行一样运转