如何让touchmove之后不触发touchend的事件

原创 2016年06月01日 14:38:17

如何让touchmove之后不触发touchend的事件

<div class="m-action-container">
                            <a class="u-btn-focus" href="javascript:;" ontouchend="window.setTimeout(function(){twindowrackMail()},0);">当前快件追踪</a>
 </div>

以前的项目上有很多这样的代码,直接用HTML的事件处理,这种绑定方式有几个缺陷:
1、时差问题:用户在touchend按钮的时候,js还未被加载;
2.HTML和js代码紧密耦合;
3.touchemove之后,touchend时间仍会被触发;我们希望move之后就不触发end;

因为这样上类似的代码太多,不能一个一个改;

$(function() {
        $("[ontouchend]").each(function(index, element) {
            var moved = false;
            var bindFn = function(touchEndFn) {
                    if (!moved) {
                        eval(touchEndFn);
                    }
                    moved = false;
                }
            $(this).bind("touchend", bindFn.bind(this, $(this).attr("ontouchend")));
            $(this).bind("touchmove", function() {
                moved = true;
                console.log("moving");
            });
             $(this).removeAttr("ontouchend");
        });

})

思路:
1. 先找到所有具有[ontouchedend]属性的节点;设置一个变量moved来标识是否有移动过,初始值为false;
2. 绑定touchmove事件,将moved置为true;
3. 绑定touchend事件,绑定函数的逻辑改成,如果moved为false,就执行原来函数(在这之前要获取到原来touchen属性的函数);如果moved为true,将moved设置为初始值false;

需要用到:
1. $(“[ontouchend]”).each();
2. $(this).bind();
3. foo.bind(this, argument);
4. $(this).removeAttr();
5. jquery ready()的几种实现方法:①$(document).ready(){
}); ②$(function(){ });还有几种不列举了


安卓上的问题

但是~在搜索过程中发现一个问题,但这个问题我自己并没有遇到;

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

小结

touch事件的触发,在AndroidIOS系统下,是有区别的,比如本文中出现的在touchend在Android下,有时并不会被触发的情况,在IOS下,应该是都可以触发的,所以,当希望使用touch事件时,请多多注意。
本文只是一个测试,也算是是一个我对touch事件的一点点简单的认识,如有描述错误或者理解错误的地方,恳请指教,非常感谢!
PS:发现自己还是不能一段一段的写东西,因为总是记不住之前原本的思想,和想要写的内容。本篇内容,写到最后,就感觉有些乱了,而且感觉也没有写出什么实质的内容。
本文地址:http://www.zhangyunling.com/?p=230
touchcancel

Sent when a touch point has been disrupted in some way. There are several possible reasons why this might happen (and the exact reasons will vary from device to device, as well as browser to browser):

 - An event of some kind occurred that canceled the touch; this might happen if a modal alert pops up during the interaction.
- The touch point has left the document window and moved into the browser's UI area, a plug-in, or other external content.
- The user has placed more touch points on the screen than can be supported, in which case the earliest Touch in the TouchList gets canceled.

能否用click替代touch

在手持设备的浏览器上(本处主要指代iOS和Android系统上的webkit内核的浏览器和嵌入在应用程序里面的webview),由于两次连续“轻触”是“放大”的操作(即使你两次轻触的是一个链接或一个有click事件监听器的元素),所以在第一次被“轻触”后,浏览器需要先等一段时间,看看有没有所谓的“连续的第二次轻触”。如果有,则进行“放大”操作。没有,才敢放心地认为用户不是要放大,而是需要“click”至此才敢触发click事件,导致“短按(手指接触屏幕到离开屏幕的时间比较短)”的click事件通常约会延迟300ms左右。

zepto已经封装了上述tap:zepto/src/touch.js at master 路 madrobby/zepto 路 GitHub
另外(由下面的@张辰 同学的回答,)还可以直接使用Fastclick:ftlabs/fastclick · GitHub来模拟点击,也不会有延迟,

作者:佑界 链接:https://www.zhihu.com/question/20702822/answer/15992377 来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

版权声明:本文为博主原创文章,未经博主允许不得转载。

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

在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件,用的较多的是使用touchend事件替代PC端的click和mouseup事件。但是,touchend事件在页面滚动时有个问题。在滚动完...
  • yhb241
  • yhb241
  • 2015年08月12日 16:53
  • 5941

移动端touchmove事件边界touchend不触发

做前端一年整,碰到不少问题,以前都是找资源,解决问题,不会去分享资源,这次是我第一次写博客,如果有什么问题,欢迎来交流。 在过去一年的时间里,我所接触的多有是移动端的项目,移动前端中,touch触...

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

在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件,用的较多的是使用touchend事件替代PC端的click和mouseup事件。但是,touchend事件在页面滚动时有个问题。在滚动完...

touchstart,touchmove,touchend触摸事件的小小实践心得

近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成...

HTML5触摸事件(touchstart、touchmove和touchend)

HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主...

vue自定义移动端touch事件,点击、滑动、长按事件

基于vue自定义指令封装的移动端touch事件,包括点击事件tap、滑动事件swipe、长按事件langtap等...

如何解决Android设备上touchend不能触发bug

移动项目开发过程中,经常需要用到滑动的事件来处理一些效果。通常情况下,我们会通过  touchstart->touchmove->touchend  的过程来定义这个事件。这些事件的触发顺序是  to...
  • bbsyi
  • bbsyi
  • 2016年01月23日 17:29
  • 2221

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

一个方法是用 preventDefault(),但不好使,会弄得屏幕上下滚动迟疑。 另外一个方法个人原创(但是也是受了几个前辈的启发),见下面代码: var timerId; document....

touchmove在android下面只触发一次的奇葩设定

touchmove事件只触发一次的问题   在Android下直接使用touchmove事件会在很多浏览器中出现每次操作只触发一次touchmove的情况。这是因为Android中对触屏事件奇葩解析造...
  • cdnight
  • cdnight
  • 2016年02月02日 19:04
  • 2020

iOS 为移动动画中的View添加touch事件

对Core Animation来说,不管是显式动画还是隐式动画,对其设置frame都是立即设置的,比如说给一个UIView做移动动画,虽然看起来frame在持续改变,但其时它的frame已经是最终值了...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何让touchmove之后不触发touchend的事件
举报原因:
原因补充:

(最多只允许输入30个字)